import React, { useMemo, useState } from "react";

const TRAINS = [
  { code: "701", name: "Subarna Express", route: "Chattogram - Dhaka", type: "Intercity" },
  { code: "703", name: "Mohanagar Godhuli", route: "Chattogram - Dhaka", type: "Intercity" },
  { code: "704", name: "Mohanagar Provati", route: "Dhaka - Chattogram", type: "Intercity" },
  { code: "705", name: "Ekota Express", route: "Dhaka - Panchagarh", type: "Intercity" },
  { code: "707", name: "Tista Express", route: "Dhaka - Dewanganj", type: "Intercity" },
  { code: "709", name: "Parabat Express", route: "Dhaka - Sylhet", type: "Intercity" },
  { code: "711", name: "Upakul Express", route: "Noakhali - Dhaka", type: "Intercity" },
  { code: "713", name: "Korotoa Express", route: "Santahar - Burimari", type: "Intercity" },
  { code: "715", name: "Kopotaksh Express", route: "Khulna - Rajshahi", type: "Intercity" },
  { code: "717", name: "Joyontika Express", route: "Dhaka - Sylhet", type: "Intercity" },
  { code: "719", name: "Paharika Express", route: "Chattogram - Sylhet", type: "Intercity" },
  { code: "721", name: "Mahanagar Express", route: "Chattogram - Dhaka", type: "Intercity" },
  { code: "723", name: "Udayan Express", route: "Chattogram - Sylhet", type: "Intercity" },
  { code: "725", name: "Sundarban Express", route: "Khulna - Dhaka", type: "Intercity" },
  { code: "727", name: "Rupsa Express", route: "Khulna - Chilahati", type: "Intercity" },
  { code: "729", name: "Meghna Express", route: "Chattogram - Chandpur", type: "Intercity" },
  { code: "731", name: "Barind Express", route: "Rajshahi - Chilahati", type: "Intercity" },
  { code: "733", name: "Titumir Express", route: "Rajshahi - Chilahati", type: "Intercity" },
  { code: "735", name: "Agnibeena Express", route: "Dhaka - Tarakandi", type: "Intercity" },
  { code: "737", name: "Egarosindur Provati", route: "Dhaka - Kishoreganj", type: "Intercity" },
  { code: "739", name: "Upaban Express", route: "Dhaka - Sylhet", type: "Intercity" },
  { code: "741", name: "Turna Express", route: "Chattogram - Dhaka", type: "Intercity" },
  { code: "743", name: "Brahmaputra Express", route: "Dhaka - Dewanganj", type: "Intercity" },
  { code: "745", name: "Jamuna Express", route: "Dhaka - Tarakandi", type: "Intercity" },
  { code: "747", name: "Simanta Express", route: "Khulna - Chilahati", type: "Intercity" },
  { code: "749", name: "Egarosindur Godhuli", route: "Dhaka - Kishoreganj", type: "Intercity" },
  { code: "751", name: "Lalmoni Express", route: "Dhaka - Lalmonirhat", type: "Intercity" },
  { code: "753", name: "Silk City Express", route: "Dhaka - Rajshahi", type: "Intercity" },
  { code: "755", name: "Madhumati Express", route: "Dhaka - Rajshahi", type: "Intercity" },
  { code: "757", name: "Drutajan Express", route: "Dhaka - Panchagarh", type: "Intercity" },
  { code: "759", name: "Padma Express", route: "Dhaka - Rajshahi", type: "Intercity" },
  { code: "761", name: "Sagardari Express", route: "Khulna - Rajshahi", type: "Intercity" },
  { code: "763", name: "Chitra Express", route: "Khulna - Dhaka", type: "Intercity" },
  { code: "765", name: "Nilsagar Express", route: "Dhaka - Chilahati", type: "Intercity" },
  { code: "767", name: "Dolonchapa Express", route: "Santahar - Panchagarh", type: "Intercity" },
  { code: "769", name: "Dhumketu Express", route: "Dhaka - Rajshahi", type: "Intercity" },
  { code: "771", name: "Rangpur Express", route: "Dhaka - Rangpur", type: "Intercity" },
  { code: "773", name: "Kalni Express", route: "Dhaka - Sylhet", type: "Intercity" },
  { code: "775", name: "Sirajganj Express", route: "Sirajganj Bazar - Dhaka", type: "Intercity" },
  { code: "777", name: "Haor Express", route: "Dhaka - Mohonganj", type: "Intercity" },
  { code: "779", name: "Dhalarchar Express", route: "Dhalarchar - Rajshahi", type: "Intercity" },
  { code: "781", name: "Kishoreganj Express", route: "Dhaka - Kishoreganj", type: "Intercity" },
  { code: "783", name: "Tungipara Express", route: "Gobra - Rajshahi", type: "Intercity" },
  { code: "785", name: "Bijoy Express", route: "Chattogram - Jamalpur", type: "Intercity" },
  { code: "787", name: "Sonar Bangla Express", route: "Chattogram - Dhaka", type: "Intercity" },
  { code: "789", name: "Mohanagar Express", route: "Dhaka - Mohonganj", type: "Intercity" },
  { code: "791", name: "Banlata Express", route: "Dhaka - Chapainawabganj", type: "Intercity" },
  { code: "793", name: "Panchagarh Express", route: "Dhaka - Panchagarh", type: "Intercity" },
  { code: "795", name: "Benapole Express", route: "Benapole - Dhaka", type: "Intercity" },
  { code: "797", name: "Kurigram Express", route: "Dhaka - Kurigram", type: "Intercity" },
  { code: "799", name: "Jamalpur Express", route: "Dhaka - Bhuyapur", type: "Intercity" },
  { code: "801", name: "Chattala Express", route: "Chattogram - Dhaka", type: "Intercity" },
  { code: "803", name: "Banglabandha Express", route: "Rajshahi - Panchagarh", type: "Intercity" },
  { code: "805", name: "Chilahati Express", route: "Dhaka - Chilahati", type: "Intercity" },
  { code: "809", name: "Burimari Express", route: "Dhaka - Burimari", type: "Intercity" },
  { code: "813", name: "Coxs Bazar Express", route: "Coxs Bazar - Dhaka", type: "Intercity" },
  { code: "815", name: "Paryatak Express", route: "Coxs Bazar - Dhaka", type: "Intercity" },
  { code: "817", name: "Subarnachar Express", route: "Noakhali - Dhaka", type: "Intercity" },
  { code: "819", name: "Tanguar Express", route: "Dhaka - Sylhet", type: "Intercity" },
  { code: "821", name: "Shoikat Express", route: "Chattogram - Coxs Bazar", type: "Intercity" },
  { code: "822", name: "Probal Express", route: "Coxs Bazar - Chattogram", type: "Intercity" },
  { code: "827", name: "Rupashi Bangla Express", route: "Benapole - Dhaka", type: "Intercity" },
];

const Icon = ({ name, size = 20, className = "" }) => {
  const common = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 2,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    className,
    "aria-hidden": "true",
  };

  const paths = {
    search: (
      <>
        <circle cx="11" cy="11" r="8" />
        <path d="m21 21-4.3-4.3" />
      </>
    ),
    pin: (
      <>
        <path d="M12 21s7-4.4 7-11a7 7 0 1 0-14 0c0 6.6 7 11 7 11Z" />
        <circle cx="12" cy="10" r="2.5" />
      </>
    ),
    train: (
      <>
        <rect x="5" y="3" width="14" height="14" rx="3" />
        <path d="M8 21h8" />
        <path d="m9 17-2 4" />
        <path d="m15 17 2 4" />
        <path d="M9 7h6" />
        <path d="M8 11h3" />
        <path d="M13 11h3" />
      </>
    ),
    clock: (
      <>
        <circle cx="12" cy="12" r="9" />
        <path d="M12 7v5l3 2" />
      </>
    ),
    refresh: (
      <>
        <path d="M21 12a9 9 0 0 0-15.3-6.3L3 8" />
        <path d="M3 3v5h5" />
        <path d="M3 12a9 9 0 0 0 15.3 6.3L21 16" />
        <path d="M16 16h5v5" />
      </>
    ),
    wifi: (
      <>
        <path d="M5 13a10 10 0 0 1 14 0" />
        <path d="M8.5 16.5a5 5 0 0 1 7 0" />
        <path d="M2 9a15 15 0 0 1 20 0" />
        <path d="M12 20h.01" />
      </>
    ),
    alert: (
      <>
        <circle cx="12" cy="12" r="9" />
        <path d="M12 8v5" />
        <path d="M12 16h.01" />
      </>
    ),
  };

  return <svg {...common}>{paths[name]}</svg>;
};

function filterTrains(trains, searchText) {
  const normalizedSearch = searchText.trim().toLowerCase();

  if (!normalizedSearch) {
    return trains;
  }

  return trains.filter((train) => {
    const value = `${train.code} ${train.name} ${train.route} ${train.type}`.toLowerCase();
    return value.includes(normalizedSearch);
  });
}

function makeMockLocation(train, now = new Date()) {
  const locations = [
    "Near Tongi",
    "Crossing Akhaura",
    "Departed Feni",
    "Near Ishwardi",
    "Reached Bhairab Bazar",
    "Between Joydebpur and Tangail",
  ];
  const nextStations = ["Kamalapur", "Airport", "Akhaura", "Rajshahi", "Chattogram", "Sylhet"];
  const trainCodeNumber = Number(train.code) || 0;
  const index = trainCodeNumber % locations.length;

  return {
    currentLocation: locations[index],
    nextStation: nextStations[index],
    delay: `${(trainCodeNumber % 17) + 3} min`,
    speed: `${55 + (trainCodeNumber % 35)} km/h`,
    lastUpdated: now.toLocaleTimeString([], {
      hour: "2-digit",
      minute: "2-digit",
    }),
    status: "Running",
  };
}

function getMockLiveLocation(train) {
  return new Promise((resolve) => {
    window.setTimeout(() => {
      resolve(makeMockLocation(train));
    }, 700);
  });
}

async function fetchLiveLocation(train) {
  // Real backend ready code:
  // const response = await fetch(`/api/train-location?train=${encodeURIComponent(train.code)}`);
  // if (!response.ok) throw new Error("Could not fetch train location");
  // return response.json();

  return getMockLiveLocation(train);
}

function runSelfTests() {
  if (typeof console === "undefined") return;

  console.assert(Array.isArray(TRAINS), "TRAINS should be an array");
  console.assert(TRAINS.length > 0, "TRAINS should not be empty");
  console.assert(filterTrains(TRAINS, "701").some((train) => train.code === "701"), "Search by train code should work");
  console.assert(filterTrains(TRAINS, "Subarna").some((train) => train.name === "Subarna Express"), "Search by train name should work");
  console.assert(filterTrains(TRAINS, "dhaka").length > 0, "Search by route should work");

  const mock = makeMockLocation({ code: "701" }, new Date("2026-01-01T10:30:00"));
  console.assert(Boolean(mock.currentLocation), "Mock location should include currentLocation");
  console.assert(Boolean(mock.nextStation), "Mock location should include nextStation");
  console.assert(mock.status === "Running", "Mock status should be Running");
}

runSelfTests();

export default function BDTrainLiveTracker() {
  const [query, setQuery] = useState("");
  const [selectedTrain, setSelectedTrain] = useState(null);
  const [isOpen, setIsOpen] = useState(false);
  const [location, setLocation] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const filteredTrains = useMemo(() => filterTrains(TRAINS, query), [query]);

  const handleSelect = async (train) => {
    setSelectedTrain(train);
    setQuery(`${train.code} - ${train.name}`);
    setIsOpen(false);
    setLoading(true);
    setLocation(null);
    setError("");

    try {
      const data = await fetchLiveLocation(train);
      setLocation(data);
    } catch (err) {
      setError("Live location load kora jayni. Please abar try korun.");
    } finally {
      setLoading(false);
    }
  };

  const handleRefresh = () => {
    if (selectedTrain && !loading) {
      handleSelect(selectedTrain);
    }
  };

  return (
    <main className="min-h-screen bg-slate-100 px-4 py-8 text-slate-900">
      <section className="mx-auto max-w-5xl">
        <div className="mb-8 rounded-[2rem] bg-white p-6 shadow-sm md:p-8">
          <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
            <div>
              <div className="mb-3 inline-flex items-center gap-2 rounded-full bg-slate-100 px-4 py-2 text-sm font-medium text-slate-600">
                <Icon name="wifi" size={16} /> Bangladesh Railway Live Tracker
              </div>
              <h1 className="text-3xl font-bold tracking-tight md:text-5xl">BD Train Live Location</h1>
              <p className="mt-3 max-w-2xl text-slate-600">
                Train name or code diye search korun. Dropdown theke select korlei page reload chara live location dekhabe.
              </p>
            </div>

            <div className="rounded-3xl bg-slate-900 p-5 text-white shadow-lg">
              <p className="text-sm text-slate-300">Total trains</p>
              <p className="mt-1 text-4xl font-bold">{TRAINS.length}</p>
            </div>
          </div>
        </div>

        <div className="grid gap-6 lg:grid-cols-[1.05fr_0.95fr]">
          <div className="rounded-[2rem] bg-white p-5 shadow-sm md:p-6">
            <label className="mb-3 block text-sm font-semibold text-slate-700" htmlFor="train-search">
              Search or choose train
            </label>

            <div className="relative">
              <Icon name="search" className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" size={20} />
              <input
                id="train-search"
                value={query}
                onChange={(event) => {
                  setQuery(event.target.value);
                  setIsOpen(true);
                }}
                onFocus={() => setIsOpen(true)}
                placeholder="Example: 701, Subarna, Dhaka..."
                className="w-full rounded-2xl border border-slate-200 bg-slate-50 py-4 pl-12 pr-4 text-base outline-none transition focus:border-slate-400 focus:bg-white"
              />

              {isOpen && (
                <div className="absolute z-20 mt-3 max-h-96 w-full overflow-auto rounded-2xl border border-slate-200 bg-white p-2 shadow-xl">
                  {filteredTrains.length === 0 ? (
                    <div className="flex items-center gap-2 p-4 text-sm text-slate-500">
                      <Icon name="alert" size={18} /> No train found
                    </div>
                  ) : (
                    filteredTrains.map((train) => (
                      <button
                        key={`${train.code}-${train.name}`}
                        type="button"
                        onMouseDown={(event) => event.preventDefault()}
                        onClick={() => handleSelect(train)}
                        className="flex w-full items-center justify-between gap-3 rounded-xl p-3 text-left transition hover:bg-slate-100"
                      >
                        <span>
                          <span className="block font-semibold">{train.code} - {train.name}</span>
                          <span className="text-sm text-slate-500">{train.route}</span>
                        </span>
                        <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600">
                          {train.type}
                        </span>
                      </button>
                    ))
                  )}
                </div>
              )}
            </div>

            <div className="mt-6 rounded-3xl bg-slate-50 p-4">
              <h2 className="mb-3 flex items-center gap-2 font-semibold">
                <Icon name="train" size={19} /> Train list preview
              </h2>

              <div className="grid max-h-72 gap-2 overflow-auto pr-1 sm:grid-cols-2">
                {TRAINS.slice(0, 20).map((train) => (
                  <button
                    key={`preview-${train.code}`}
                    type="button"
                    onClick={() => handleSelect(train)}
                    className="rounded-2xl border border-slate-200 bg-white p-3 text-left text-sm transition hover:border-slate-400"
                  >
                    <strong>{train.code}</strong> - {train.name}
                    <span className="mt-1 block text-xs text-slate-500">{train.route}</span>
                  </button>
                ))}
              </div>

              <p className="mt-3 text-xs text-slate-500">
                Dropdown e full list searchable ache. Ei preview section optional.
              </p>
            </div>
          </div>

          <div className="rounded-[2rem] bg-white p-5 shadow-sm md:p-6">
            {!selectedTrain && !loading && !error && (
              <div className="flex min-h-96 flex-col items-center justify-center rounded-3xl border border-dashed border-slate-300 bg-slate-50 p-6 text-center">
                <Icon name="pin" size={46} className="mb-4 text-slate-400" />
                <h2 className="text-xl font-bold">Select a train</h2>
                <p className="mt-2 text-slate-500">Train select korle ekhanei live location show korbe.</p>
              </div>
            )}

            {loading && (
              <div className="flex min-h-96 flex-col items-center justify-center rounded-3xl bg-slate-50 p-6 text-center">
                <Icon name="refresh" size={44} className="mb-4 animate-spin text-slate-500" />
                <h2 className="text-xl font-bold">Fetching live location...</h2>
                <p className="mt-2 text-slate-500">Backend API theke latest data ashtese.</p>
              </div>
            )}

            {error && !loading && (
              <div className="flex min-h-96 flex-col items-center justify-center rounded-3xl border border-red-200 bg-red-50 p-6 text-center">
                <Icon name="alert" size={44} className="mb-4 text-red-500" />
                <h2 className="text-xl font-bold text-red-700">Something went wrong</h2>
                <p className="mt-2 text-red-600">{error}</p>
                <button
                  type="button"
                  onClick={handleRefresh}
                  className="mt-5 rounded-2xl bg-red-600 px-5 py-3 font-semibold text-white transition hover:bg-red-700"
                >
                  Try again
                </button>
              </div>
            )}

            {selectedTrain && location && !loading && !error && (
              <div className="rounded-3xl bg-slate-900 p-5 text-white shadow-lg md:p-6">
                <div className="flex items-start justify-between gap-4">
                  <div>
                    <p className="text-sm text-slate-300">Selected train</p>
                    <h2 className="mt-1 text-2xl font-bold">
                      {selectedTrain.code} - {selectedTrain.name}
                    </h2>
                    <p className="mt-1 text-slate-300">{selectedTrain.route}</p>
                  </div>

                  <button
                    type="button"
                    onClick={handleRefresh}
                    className="rounded-2xl bg-white/10 p-3 transition hover:bg-white/20"
                    title="Refresh location"
                  >
                    <Icon name="refresh" size={20} />
                  </button>
                </div>

                <div className="mt-6 rounded-[1.5rem] bg-white p-5 text-slate-900">
                  <div className="flex items-center gap-3">
                    <div className="rounded-2xl bg-slate-900 p-3 text-white">
                      <Icon name="pin" size={24} />
                    </div>
                    <div>
                      <p className="text-sm text-slate-500">Current location</p>
                      <p className="text-2xl font-bold">{location.currentLocation}</p>
                    </div>
                  </div>

                  <div className="mt-5 grid gap-3 sm:grid-cols-2">
                    <div className="rounded-2xl bg-slate-100 p-4">
                      <p className="text-sm text-slate-500">Next station</p>
                      <p className="mt-1 font-bold">{location.nextStation}</p>
                    </div>
                    <div className="rounded-2xl bg-slate-100 p-4">
                      <p className="text-sm text-slate-500">Delay</p>
                      <p className="mt-1 font-bold">{location.delay}</p>
                    </div>
                    <div className="rounded-2xl bg-slate-100 p-4">
                      <p className="text-sm text-slate-500">Speed</p>
                      <p className="mt-1 font-bold">{location.speed}</p>
                    </div>
                    <div className="rounded-2xl bg-slate-100 p-4">
                      <p className="text-sm text-slate-500">Status</p>
                      <p className="mt-1 font-bold">{location.status}</p>
                    </div>
                  </div>
                </div>

                <div className="mt-4 flex items-center gap-2 text-sm text-slate-300">
                  <Icon name="clock" size={16} /> Last updated: {location.lastUpdated}
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
    </main>
  );
}