"use client";

import Link from "next/link";
import { MoreVertical, Search, Upload } from "lucide-react";
import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { useState } from "react";

type StoreRow = {
  id: string;
  imageSeed: string;
  name: string;
  link: string;
  email: string;
  totalOrders: number;
  orderValue: number;
};

const STORE_ROWS: StoreRow[] = [
  {
    id: "1",
    imageSeed: "from-[#452700] to-[#A04A00]",
    name: "App Store",
    link: "www.abc.com",
    email: "lisy@gmail.com",
    totalOrders: 120,
    orderValue: 15,
  },
  {
    id: "2",
    imageSeed: "from-[#6E6E6E] to-[#BEBEBE]",
    name: "App Store",
    link: "www.abc.com",
    email: "lisy@gmail.com",
    totalOrders: 301,
    orderValue: 20,
  },
  {
    id: "3",
    imageSeed: "from-[#0E4E86] to-[#1CA0DD]",
    name: "App Store",
    link: "www.abc.com",
    email: "lisy@gmail.com",
    totalOrders: 161,
    orderValue: 30,
  },
  {
    id: "4",
    imageSeed: "from-[#8B1414] to-[#F05353]",
    name: "App Store",
    link: "www.abc.com",
    email: "lisy@gmail.com",
    totalOrders: 129,
    orderValue: 17,
  },
  {
    id: "5",
    imageSeed: "from-[#5A6D87] to-[#9CB4D3]",
    name: "App Store",
    link: "www.abc.com",
    email: "lisy@gmail.com",
    totalOrders: 311,
    orderValue: 28,
  },
  {
    id: "6",
    imageSeed: "from-[#6D0B0B] to-[#D92D20]",
    name: "App Store",
    link: "www.abc.com",
    email: "lisy@gmail.com",
    totalOrders: 142,
    orderValue: 35,
  },
  {
    id: "7",
    imageSeed: "from-[#7B5E10] to-[#E0B429]",
    name: "App Store",
    link: "www.abc.com",
    email: "lisy@gmail.com",
    totalOrders: 316,
    orderValue: 29,
  },
];

type StoresPageProps = {
  params: { app: string };
};

export default function StoresPage({ params }: StoresPageProps) {
  const { app } = params;
  const [editingStore, setEditingStore] = useState<StoreRow | null>(null);
  const [isAddStoreOpen, setIsAddStoreOpen] = useState(false);

  return (
    <div className="min-h-0 bg-[#F3F4F6] p-2 md:p-3">
      <MainTitle title="Manage Store">
        <Button
          className="h-9 rounded-lg bg-[#003E6B] px-5 text-xs font-semibold text-white shadow-none hover:bg-[#003256]"
          onClick={() => setIsAddStoreOpen(true)}
        >
          Add New Store
        </Button>
      </MainTitle>

      <section className="rounded-lg border border-[#E5E7EB] bg-white p-3">
        <h2 className="mb-3 text-[18px] font-semibold text-[#111827]">All Stores</h2>
        <div className="mb-2 flex flex-wrap items-center justify-end gap-2">
          <div className="flex h-8 w-full items-center gap-1.5 rounded-md border border-[#D1D5DB] px-2 md:w-[180px]">
            <Search className="size-3.5 shrink-0 text-[#9CA3AF]" aria-hidden />
            <Input
              type="search"
              placeholder="Lisy"
              className="h-full border-0 p-0 text-[11px] text-[#111827] placeholder:text-[#9CA3AF] focus-visible:ring-0"
              aria-label="Search stores"
            />
          </div>
          <Button type="button" variant="outline" className="h-8 rounded-md border-[#D1D5DB] px-3 text-[11px]">
            Filters
          </Button>
          <Button type="button" variant="outline" className="h-8 rounded-md border-[#D1D5DB] px-3 text-[11px]">
            filters
          </Button>
        </div>

        <div className="overflow-x-auto rounded-md border border-[#E5E7EB]">
          <table className="w-full min-w-[980px]">
            <thead>
              <tr className="border-b border-[#E5E7EB] bg-[#F9FAFB]">
                <th className="w-10 px-3 py-2 text-left">
                  <input type="checkbox" className="size-3.5 rounded border border-[#9CA3AF]" aria-label="Select all rows" />
                </th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Image</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Store Name</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Link</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Email</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Total Orders</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Order Value</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Action</th>
              </tr>
            </thead>
            <tbody>
              {STORE_ROWS.map((row) => (
                <tr key={row.id} className="border-b border-[#F3F4F6] last:border-b-0">
                  <td className="px-3 py-2.5">
                    <input
                      type="checkbox"
                      className="size-3.5 rounded border border-[#9CA3AF]"
                      aria-label={`Select ${row.name}`}
                    />
                  </td>
                  <td className="px-3 py-2.5">
                    <div className={`size-8 rounded-md bg-gradient-to-br ${row.imageSeed}`} />
                  </td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.name}</td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.link}</td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.email}</td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.totalOrders}</td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.orderValue}</td>
                  <td className="px-3 py-2.5">
                    <button
                      type="button"
                      className="inline-flex items-center justify-center rounded p-1 text-[#111827] hover:bg-[#F3F4F6]"
                      aria-label={`More actions for ${row.name}`}
                      onClick={() => setEditingStore(row)}
                    >
                      <MoreVertical className="size-4" aria-hidden />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="mt-2 flex items-center justify-between">
          <Button
            type="button"
            variant="outline"
            className="h-8 rounded-md border-[#E5E7EB] px-4 text-[10px] font-medium text-[#6B7280]"
          >
            Previous
          </Button>
          <p className="text-[10px] text-[#9CA3AF]">page 1 of 10</p>
          <Button
            type="button"
            variant="outline"
            className="h-8 rounded-md border-[#E5E7EB] px-4 text-[10px] font-medium text-[#6B7280]"
          >
            Next
          </Button>
        </div>
      </section>

      <Dialog open={Boolean(editingStore)} onOpenChange={(open) => !open && setEditingStore(null)}>
        <DialogContent className="max-w-[860px] gap-0 rounded-xl border-0 bg-white p-0 shadow-2xl [&>button]:right-4 [&>button]:top-4 [&>button]:inline-flex [&>button]:h-8 [&>button]:w-8 [&>button]:items-center [&>button]:justify-center [&>button]:rounded-md [&>button]:border-0 [&>button]:bg-[#EEF1F4] [&>button]:p-0 [&>button]:opacity-100 [&>button]:shadow-none [&>button]:hover:bg-[#E3E7EC] [&>button]:hover:opacity-100 [&>button]:focus:ring-0 [&>button]:focus:ring-offset-0 [&>button>svg]:size-4 [&>button>svg]:text-[#667085]">
          <DialogHeader className="px-6 pb-0 pt-6">
            <DialogTitle className="text-left text-[18px] font-semibold text-[#111827]">Edit Store</DialogTitle>
          </DialogHeader>

          <div className="space-y-4 px-6 pb-6 pt-4">
            <div className="flex items-center justify-center gap-4 rounded-lg border border-dashed border-[#E5E7EB] bg-[#F9FAFB] p-4">
              <div
                className={`flex size-[56px] items-center justify-center rounded-full bg-gradient-to-br ${editingStore?.imageSeed ?? "from-[#6E6E6E] to-[#BEBEBE]"}`}
              />
              <div className="space-y-0.5 text-center">
                <p className="text-[12px] text-[#667085]">Drag image here</p>
                <p className="text-[12px] text-[#98A2B3]">or</p>
                <button type="button" className="inline-flex items-center gap-1 text-[12px] font-medium text-[#1570EF]">
                  <Upload className="size-3.5" aria-hidden />
                  Browse image
                </button>
              </div>
            </div>

            <div className="grid gap-3 md:grid-cols-2">
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">Enter Store Name</label>
                <Input
                  defaultValue={editingStore?.name}
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] focus-visible:ring-0"
                />
              </div>
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">Link</label>
                <Input
                  defaultValue={editingStore?.link}
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] focus-visible:ring-0"
                />
              </div>
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">Owner Name</label>
                <Input
                  defaultValue="Lisy Linda"
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] focus-visible:ring-0"
                />
              </div>
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">Email</label>
                <Input
                  defaultValue={editingStore?.email}
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] focus-visible:ring-0"
                />
              </div>
            </div>

            <div className="space-y-1.5">
              <label className="text-[11px] text-[#667085]">Phone Number</label>
              <div className="grid grid-cols-[120px_1fr] gap-2">
                <div className="flex h-10 items-center rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 text-[12px] text-[#111827]">
                  🇺🇸 +1
                </div>
                <Input
                  defaultValue="802 345 6789"
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] focus-visible:ring-0"
                />
              </div>
            </div>

            <div className="space-y-1.5">
              <label className="text-[11px] text-[#667085]">Address</label>
              <textarea
                defaultValue="123 main street near post office, building number 13D, floor number 08, room number 12."
                className="min-h-[120px] w-full resize-none rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 py-2.5 text-[13px] text-[#111827] outline-none"
              />
            </div>

            <div className="grid gap-3 md:grid-cols-2">
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">State</label>
                <div className="flex h-10 items-center rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 text-[13px] text-[#111827]">
                  California
                </div>
              </div>
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">Zip Code</label>
                <Input
                  defaultValue="10006"
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] focus-visible:ring-0"
                />
              </div>
            </div>

            <div className="space-y-1.5">
              <label className="text-[11px] text-[#667085]">Country</label>
              <div className="flex h-10 items-center rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 text-[13px] text-[#111827]">
                United State
              </div>
            </div>

            <div className="flex items-center justify-center gap-4 pt-1">
              <Button
                type="button"
                className="h-9 min-w-[110px] rounded-md bg-[#EF7D00] text-[12px] font-semibold text-white hover:bg-[#D46F00]"
                onClick={() => setEditingStore(null)}
              >
                Cancel
              </Button>
              <Button
                type="button"
                className="h-9 min-w-[110px] rounded-md bg-[#003E6B] text-[12px] font-semibold text-white hover:bg-[#003256]"
                onClick={() => setEditingStore(null)}
              >
                Update
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      <Dialog open={isAddStoreOpen} onOpenChange={setIsAddStoreOpen}>
        <DialogContent className="max-w-[860px] gap-0 rounded-xl border-0 bg-white p-0 shadow-2xl [&>button]:right-4 [&>button]:top-4 [&>button]:inline-flex [&>button]:h-8 [&>button]:w-8 [&>button]:items-center [&>button]:justify-center [&>button]:rounded-md [&>button]:border-0 [&>button]:bg-[#EEF1F4] [&>button]:p-0 [&>button]:opacity-100 [&>button]:shadow-none [&>button]:hover:bg-[#E3E7EC] [&>button]:hover:opacity-100 [&>button]:focus:ring-0 [&>button]:focus:ring-offset-0 [&>button>svg]:size-4 [&>button>svg]:text-[#667085]">
          <DialogHeader className="px-6 pb-0 pt-6">
            <DialogTitle className="text-left text-[18px] font-semibold text-[#111827]">Add A New Store</DialogTitle>
          </DialogHeader>

          <div className="space-y-4 px-6 pb-6 pt-4">
            <div className="flex items-center justify-center gap-4 rounded-lg border border-dashed border-[#E5E7EB] bg-[#F9FAFB] p-4">
              <div className="flex size-[56px] items-center justify-center rounded-full border border-dashed border-[#98A2B3] text-[#98A2B3]">
                <Upload className="size-5" aria-hidden />
              </div>
              <div className="space-y-0.5 text-center">
                <p className="text-[12px] text-[#667085]">Drag image here</p>
                <p className="text-[12px] text-[#98A2B3]">or</p>
                <button type="button" className="inline-flex items-center gap-1 text-[12px] font-medium text-[#1570EF]">
                  Browse image
                </button>
              </div>
            </div>

            <div className="grid gap-3 md:grid-cols-2">
              <Input placeholder="Enter Store Name" className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] focus-visible:ring-0" />
              <Input placeholder="Enter link" className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] focus-visible:ring-0" />
              <Input placeholder="Enter Owner Name" className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] focus-visible:ring-0" />
              <Input placeholder="Enter Email" className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] focus-visible:ring-0" />
            </div>

            <div className="grid grid-cols-[120px_1fr] gap-2">
              <div className="flex h-10 items-center rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 text-[12px] text-[#111827]">
                🇺🇸 +1
              </div>
              <Input placeholder="000 000 0000" className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] focus-visible:ring-0" />
            </div>

            <textarea
              placeholder="Address"
              className="min-h-[120px] w-full resize-none rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 py-2.5 text-[13px] text-[#111827] outline-none placeholder:text-[#9CA3AF]"
            />

            <div className="grid gap-3 md:grid-cols-2">
              <div className="flex h-10 items-center rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 text-[13px] text-[#9CA3AF]">
                State
              </div>
              <Input placeholder="Zip Code" className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] focus-visible:ring-0" />
            </div>

            <div className="flex h-10 items-center rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 text-[13px] text-[#9CA3AF]">
              Enter Country Name
            </div>

            <div className="flex items-center justify-center gap-4 pt-1">
              <Button
                type="button"
                className="h-9 min-w-[110px] rounded-md bg-[#EF7D00] text-[12px] font-semibold text-white hover:bg-[#D46F00]"
                onClick={() => setIsAddStoreOpen(false)}
              >
                Cancel
              </Button>
              <Button
                type="button"
                className="h-9 min-w-[110px] rounded-md bg-[#003E6B] text-[12px] font-semibold text-white hover:bg-[#003256]"
                onClick={() => setIsAddStoreOpen(false)}
              >
                Add
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}