"use client";

import { useReducer, useRef } from "react";
import Link from "next/link";
import { parseProductCSV } from "@/lib/csv-parsers";
import { importProductsBatch } from "@/actions/import-products";

type PreviewRow = {
  name: string;
  description: string;
  price: number;
  type: string;
  active: boolean;
  image_url?: string;
  _rowIndex: number;
  _warnings: string[];
};

type ImportResult = {
  created: number;
  updated: number;
  errors: { product: string; error: string }[];
};

type State = {
  csvText: string;
  preview: PreviewRow[] | null;
  parseErrors: { row: number; error: string }[];
  importing: boolean;
  result: ImportResult | null;
  brandId: string;
};

type Action =
  | { type: "SET_CSV_TEXT"; value: string }
  | { type: "SET_BRAND_ID"; value: string }
  | { type: "PARSE_SUCCESS"; rows: PreviewRow[]; errors: { row: number; error: string }[] }
  | { type: "PARSE_FAIL"; error: string }
  | { type: "START_IMPORT" }
  | { type: "IMPORT_SUCCESS"; result: ImportResult }
  | { type: "IMPORT_FAIL"; error: string };

const initialState: State = {
  csvText: "",
  preview: null,
  parseErrors: [],
  importing: false,
  result: null,
  brandId: "",
};

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "SET_CSV_TEXT":
      return { ...state, csvText: action.value };
    case "SET_BRAND_ID":
      return { ...state, brandId: action.value };
    case "PARSE_SUCCESS":
      return { ...state, preview: action.rows, parseErrors: action.errors };
    case "PARSE_FAIL":
      return { ...state, preview: null, parseErrors: [{ row: 0, error: action.error }] };
    case "START_IMPORT":
      return { ...state, importing: true };
    case "IMPORT_SUCCESS":
      return { ...state, importing: false, result: action.result };
    case "IMPORT_FAIL":
      return {
        ...state,
        importing: false,
        result: { created: 0, updated: 0, errors: [{ product: "", error: action.error }] },
      };
  }
}

const SAMPLE_CSV = `name,description,price,type,active,image_url
Dozen Sweet Corn,Fresh picked sweet corn,12.99,Pickup,TRUE,
Corn & Butter Bundle,Dozen corn with herb butter,18.99,Pickup & Shipping,TRUE,
Citrus Gift Box,Seasonal citrus assortment,34.99,Shipping,TRUE,
`;

export default function ProductImportPage() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const fileRef = useRef<HTMLInputElement>(null);

  function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (ev) => {
      const text = ev.target?.result as string;
      dispatch({ type: "SET_CSV_TEXT", value: text });
      handlePreview(text);
    };
    reader.readAsText(file);
  }

  async function handlePreview(text?: string) {
    const toParse = text ?? state.csvText;
    if (!toParse.trim()) return;

    const parseResult = await parseProductCSV(toParse);
    if (!parseResult.success) {
      dispatch({ type: "PARSE_FAIL", error: parseResult.error });
      return;
    }

    dispatch({ type: "PARSE_SUCCESS", rows: parseResult.rows, errors: parseResult.errors });
  }

  async function handleImport() {
    if (!state.preview || !state.brandId) return;
    dispatch({ type: "START_IMPORT" });
    const importResult = await importProductsBatch(
      state.brandId,
      state.preview.map((r) => ({
        name: r.name,
        description: r.description,
        price: r.price,
        type: r.type,
        active: r.active,
        image_url: r.image_url,
      }))
    );
    if (importResult.success) {
      dispatch({
        type: "IMPORT_SUCCESS",
        result: { created: importResult.created, updated: importResult.updated, errors: importResult.errors },
      });
    } else {
      dispatch({ type: "IMPORT_FAIL", error: importResult.error });
    }
  }

  return (
    <main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
      <div className="mx-auto max-w-4xl">
        <div className="mb-6 flex items-center justify-between">
          <div>
            <Link href="/admin/products" className="text-sm text-stone-500 hover:text-stone-700">
              ← Back to Products
            </Link>
            <h1 className="mt-2 text-3xl font-bold text-stone-950">Import Products</h1>
            <p className="mt-1 text-stone-500">
              Upload a CSV file to bulk-create or update products. Matching by product name within brand.
            </p>
          </div>
          <button type="button"
            onClick={() => {
              dispatch({ type: "SET_CSV_TEXT", value: SAMPLE_CSV });
              handlePreview(SAMPLE_CSV);
            }}
            className="rounded-xl border border-stone-300 px-4 py-2 text-sm text-stone-600 hover:bg-stone-200"
          >
            Load Sample CSV
          </button>
        </div>

        {/* Brand ID */}
        <div className="mb-4">
          <label htmlFor="import-products-brand" className="block text-sm font-medium text-stone-700">Brand ID</label>
          <input aria-label="64294306 5f42 463d A5e8 2ad6c81a96de (Tuxedo)"
            id="import-products-brand"
            type="text"
            value={state.brandId}
            onChange={(e) => dispatch({ type: "SET_BRAND_ID", value: e.target.value })}
            placeholder="64294306-5f42-463d-a5e8-2ad6c81a96de (Tuxedo)"
            className="mt-1 w-full rounded-xl border border-stone-300 px-4 py-3 text-sm outline-none focus:border-blue-500"
          />
        </div>

        {/* File upload */}
        <div className="mb-4 rounded-2xl bg-white p-6 shadow-xl shadow-stone-200/50">
          <label htmlFor="import-products-csv" className="mb-2 block text-sm font-medium text-stone-700">Upload CSV</label>
          <input aria-label="Import Products Csv"
            id="import-products-csv"
            ref={fileRef}
            type="file"
            accept=".csv"
            onChange={handleFile}
            className="w-full text-sm text-stone-500"
          />
          <p className="mt-2 text-xs text-stone-500">
            Or paste CSV content below:
          </p>
          <label htmlFor="import-products-text" className="sr-only">CSV text</label>
          <textarea aria-label="Name,description,price,type,active,image Url"
            id="import-products-text"
            value={state.csvText}
            onChange={(e) => dispatch({ type: "SET_CSV_TEXT", value: e.target.value })}
            rows={6}
            className="mt-2 w-full rounded-xl border border-stone-300 px-4 py-3 text-sm font-mono outline-none focus:border-blue-500"
            placeholder="name,description,price,type,active,image_url"
          />
          <button type="button"
            onClick={() => handlePreview()}
            className="mt-3 rounded-xl border border-stone-300 px-4 py-2 text-sm font-medium text-stone-700 hover:bg-stone-100"
          >
            Preview
          </button>
        </div>

        {/* Parse errors */}
        {state.parseErrors.length > 0 && (
          <div className="mb-4 rounded-xl bg-red-50 p-4">
            <p className="text-sm font-semibold text-red-600">Parse Errors</p>
            <ul className="mt-1 space-y-1">
              {state.parseErrors.map((e) => (
                <li key={e.row} className="text-sm text-red-600">
                  Row {e.row}: {e.error}
                </li>
              ))}
            </ul>
          </div>
        )}

        {/* Preview */}
        {state.preview !== null && (
          <div className="mb-4 rounded-2xl bg-white p-6 shadow-xl shadow-stone-200/50">
            <div className="mb-4 flex items-center justify-between">
              <h2 className="text-lg font-semibold text-stone-950">
                Preview ({state.preview.length} rows)
              </h2>
              <button type="button"
                onClick={handleImport}
                disabled={!state.brandId || state.importing}
                className="rounded-xl bg-blue-600 px-6 py-3 text-sm font-bold text-white disabled:opacity-50 hover:bg-blue-500"
              >
                {state.importing ? "Importing..." : `Import ${state.preview.length} Products`}
              </button>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-stone-200">
                    <th className="py-2 px-3 text-left font-medium text-stone-600">Name</th>
                    <th className="py-2 px-3 text-left font-medium text-stone-600">Price</th>
                    <th className="py-2 px-3 text-left font-medium text-stone-600">Type</th>
                    <th className="py-2 px-3 text-left font-medium text-stone-600">Active</th>
                    <th className="py-2 px-3 text-left font-medium text-stone-600">Image</th>
                  </tr>
                </thead>
                <tbody>
                  {state.preview.map((row) => (
                    <tr key={row._rowIndex} className="border-b border-stone-200">
                      <td className="py-2 px-3 font-medium text-stone-950">{row.name}</td>
                      <td className="py-2 px-3 text-stone-600">${row.price.toFixed(2)}</td>
                      <td className="py-2 px-3 text-stone-600">{row.type}</td>
                      <td className="py-2 px-3 text-stone-600">{row.active ? "Yes" : "No"}</td>
                      <td className="max-w-[120px] truncate py-2 px-3 text-stone-500">
                        {row.image_url ?? "—"}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Result */}
        {state.result !== null && (
          <div className="rounded-2xl bg-white p-6 shadow-xl shadow-stone-200/50">
            <h2 className="text-lg font-semibold text-stone-950">Import Result</h2>
            <div className="mt-3 flex gap-6">
              <div>
                <p className="text-3xl font-bold text-emerald-600">{state.result.created}</p>
                <p className="text-sm text-stone-500">Created</p>
              </div>
              <div>
                <p className="text-3xl font-bold text-blue-600">{state.result.updated}</p>
                <p className="text-sm text-stone-500">Updated</p>
              </div>
              <div>
                <p className="text-3xl font-bold text-red-600">{state.result.errors.length}</p>
                <p className="text-sm text-stone-500">Errors</p>
              </div>
            </div>
            {state.result.errors.length > 0 && (
              <ul className="mt-3 space-y-1">
                {state.result.errors.map((e, i) => (
                  <li key={`${e.product}-${i}`} className="text-sm text-red-600">
                    {e.product && `${e.product}: `}{e.error}
                  </li>
                ))}
              </ul>
            )}
          </div>
        )}
      </div>
    </main>
  );
}