"use client";

import { useState } from "react";
import DashboardLayout from "@/components/layout/DashboardLayout";
import { API_URL } from '@/lib/api';

interface ImportRowError {
  row: number;
  message: string;
}

interface ImportSummary {
  totalRows: number;
  successCount: number;
  failedCount: number;
  errors: ImportRowError[];
}

const ENTITY_TYPES = [
  {
    key: "customers",
    label: "Customers",
    columns: [
      "Clinic Name (required)",
      "Doctor Name",
      "Phone",
      "Email",
      "Address",
      "City",
      "Emirate",
      "Clinic Type",
      "Notes",
    ],
  },
  {
    key: "machines",
    label: "Machines",
    columns: [
      "Customer Code (required, must match an existing customer)",
      "Manufacturer",
      "Model",
      "Serial Number",
      "Installation Date",
      "Warranty Expiry Date",
      "AMC Expiry Date",
      "Status",
      "Assigned Engineer Code",
      "Notes",
    ],
  },
  {
    key: "employees",
    label: "Employees",
    columns: [
      "Full Name (required)",
      "Department",
      "Designation",
      "Phone",
      "Email",
      "Joining Date",
      "Employment Status",
      "Reporting Manager",
      "Notes",
    ],
  },
  {
    key: "parts",
    label: "Parts",
    columns: [
      "Name (required)",
      "Category",
      "Manufacturer",
      "Unit",
      "Unit Price",
      "Stock Quantity",
      "Reorder Level",
      "Notes",
    ],
  },
];

export default function ImportPage() {
  const [entityType, setEntityType] = useState(ENTITY_TYPES[0].key);
  const [file, setFile] = useState<File | null>(null);
  const [uploading, setUploading] = useState(false);
  const [summary, setSummary] = useState<ImportSummary | null>(null);
  const [error, setError] = useState("");

  const activeEntity = ENTITY_TYPES.find((e) => e.key === entityType)!;

  async function handleUpload() {
    if (!file) {
      setError("Please choose an Excel (.xlsx) file first.");
      return;
    }

    setUploading(true);
    setError("");
    setSummary(null);

    try {
      const formData = new FormData();
      formData.append("file", file);

      const res = await fetch(
        `${API_URL}/api/import/${entityType}`,
        {
          method: "POST",
          body: formData,
        }
      );

      if (!res.ok) {
        throw new Error("Import failed. Check the file format and try again.");
      }

      const data: ImportSummary = await res.json();
      setSummary(data);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Import failed.");
    } finally {
      setUploading(false);
    }
  }

  return (
    <DashboardLayout>
      <div className="mb-8">
        <h2 className="text-3xl font-bold">Excel Import</h2>
        <p className="mt-1 text-slate-500">
          Bulk load customers, machines, employees, or parts from an Excel
          sheet
        </p>
      </div>

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <div className="rounded-2xl border border-slate-200 bg-white p-6">
          <label className="mb-1 block text-sm font-medium text-slate-700">
            Data Type
          </label>
          <select
            value={entityType}
            onChange={(e) => {
              setEntityType(e.target.value);
              setSummary(null);
              setError("");
            }}
            className="mb-5 w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
          >
            {ENTITY_TYPES.map((entity) => (
              <option key={entity.key} value={entity.key}>
                {entity.label}
              </option>
            ))}
          </select>

          <label className="mb-1 block text-sm font-medium text-slate-700">
            Excel File (.xlsx)
          </label>
          <input
            type="file"
            accept=".xlsx"
            onChange={(e) => setFile(e.target.files?.[0] ?? null)}
            className="mb-5 w-full rounded-xl border border-slate-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-[#1296E8]"
          />

          {error && (
            <div className="mb-4 rounded-xl bg-red-50 px-4 py-3 text-sm font-medium text-[#EE302B]">
              {error}
            </div>
          )}

          <button
            onClick={handleUpload}
            disabled={uploading}
            className="rounded-xl bg-[#EE302B] px-5 py-3 font-semibold text-white disabled:opacity-50"
          >
            {uploading ? "Importing..." : "Upload & Import"}
          </button>

          {summary && (
            <div className="mt-6 rounded-xl border border-slate-200 bg-slate-50 p-5">
              <div className="grid grid-cols-3 gap-4 text-center">
                <div>
                  <div className="text-2xl font-bold text-slate-900">
                    {summary.totalRows}
                  </div>
                  <div className="text-xs text-slate-500">Rows</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-green-600">
                    {summary.successCount}
                  </div>
                  <div className="text-xs text-slate-500">Imported</div>
                </div>
                <div>
                  <div className="text-2xl font-bold text-[#EE302B]">
                    {summary.failedCount}
                  </div>
                  <div className="text-xs text-slate-500">Failed</div>
                </div>
              </div>

              {summary.errors.length > 0 && (
                <div className="mt-5 max-h-64 overflow-y-auto rounded-lg border border-slate-200 bg-white">
                  <table className="w-full text-sm">
                    <thead className="bg-slate-50">
                      <tr>
                        <th className="px-4 py-2 text-left">Row</th>
                        <th className="px-4 py-2 text-left">Error</th>
                      </tr>
                    </thead>
                    <tbody>
                      {summary.errors.map((err) => (
                        <tr key={err.row} className="border-t border-slate-100">
                          <td className="px-4 py-2 font-semibold">
                            {err.row}
                          </td>
                          <td className="px-4 py-2 text-[#EE302B]">
                            {err.message}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          )}
        </div>

        <div className="rounded-2xl border border-slate-200 bg-white p-6">
          <h3 className="mb-3 text-lg font-bold text-slate-900">
            {activeEntity.label} — Expected Columns
          </h3>
          <p className="mb-4 text-sm text-slate-500">
            Row 1 must be a header row. Column names are matched
            case-insensitively, ignoring spaces and punctuation.
          </p>
          <ul className="space-y-2 text-sm">
            {activeEntity.columns.map((col) => (
              <li
                key={col}
                className="rounded-lg bg-slate-50 px-3 py-2 text-slate-700"
              >
                {col}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </DashboardLayout>
  );
}