/* CheckPrinterPlus.tsx
   React + TypeScript + Tailwind
   Includes UAE banks with template mapping for check sizes.
*/

import React, { useEffect, useState, useRef } from "react";

function uid(): string {
  return Math.random().toString(36).slice(2, 9);
}

const STORAGE_KEY = "checkprinterplus_v3";

interface Check {
  id: string;
  payee: string;
  amount: number;
  date: string;
  bank: string;
  email: string;
  status: "pending" | "printed";
  createdAt: string;
  printed: boolean;
  _remindedAt?: string;
}

interface LogEntry {
  id: string;
  ts: string;
  text: string;
}

interface State {
  checks: Check[];
  logs: LogEntry[];
}

interface FieldPos {
  x: number;
  y: number;
}

interface BankTemplate {
  width: number; // mm
  height: number; // mm
  fields: {
    payee: FieldPos;
    date: FieldPos;
    amount: FieldPos;
    amountWords: FieldPos;
  };
}

function loadState(): State {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return { checks: [], logs: [] };
    return JSON.parse(raw) as State;
  } catch {
    return { checks: [], logs: [] };
  }
}

function saveState(state: State) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
}

function toWords(n: number): string {
  return n.toFixed(2); // placeholder for number-to-words
}

/* UAE Bank Templates (placeholder coordinates in mm) */
const bankTemplates: Record<string, BankTemplate> = {
  "First Abu Dhabi Bank (FAB)": {
    width: 210,
    height: 99,
    fields: {
      payee: { x: 40, y: 50 },
      date: { x: 160, y: 20 },
      amount: { x: 160, y: 40 },
      amountWords: { x: 40, y: 70 },
    },
  },
  "Emirates NBD": {
    width: 210,
    height: 90,
    fields: {
      payee: { x: 35, y: 48 },
      date: { x: 150, y: 18 },
      amount: { x: 150, y: 38 },
      amountWords: { x: 35, y: 68 },
    },
  },
  "Dubai Islamic Bank": {
    width: 210,
    height: 95,
    fields: {
      payee: { x: 38, y: 52 },
      date: { x: 155, y: 22 },
      amount: { x: 155, y: 42 },
      amountWords: { x: 38, y: 72 },
    },
  },
  // Add all UAE banks with placeholders...
};

const UAE_BANKS = Object.keys(bankTemplates);

export default function CheckPrinterPlus() {
  const [state, setState] = useState<State>(() => loadState());
  const [form, setForm] = useState({
    payee: "",
    amount: "",
    date: "",
    bank: "",
    email: "",
  });
  const [filter, setFilter] = useState<"all" | "pending" | "printed">("all");
  const [reminderDays, setReminderDays] = useState<number>(3);
  const schedulerRef = useRef<NodeJS.Timer | null>(null);
  const [selected, setSelected] = useState<Check | null>(null);

  useEffect(() => {
    saveState(state);
  }, [state]);

  useEffect(() => {
    if (schedulerRef.current) clearInterval(schedulerRef.current);
    schedulerRef.current = setInterval(runScheduler, 60 * 1000);
    runScheduler();
    return () => {
      if (schedulerRef.current) clearInterval(schedulerRef.current);
    };
  }, [state, reminderDays]);

  function addLog(text: string) {
    const logs = [
      { id: uid(), ts: new Date().toISOString(), text },
      ...state.logs,
    ].slice(0, 200);
    setState((prev) => ({ ...prev, logs }));
  }

  function addCheck(e?: React.FormEvent) {
    e && e.preventDefault();
    if (!form.payee || !form.amount || !form.date) {
      addLog("Missing required fields");
      return;
    }
    const check: Check = {
      id: uid(),
      payee: form.payee,
      amount: parseFloat(form.amount),
      date: form.date,
      bank: form.bank,
      email: form.email,
      status: "pending",
      createdAt: new Date().toISOString(),
      printed: false,
    };
    setState((prev) => ({ checks: [check, ...prev.checks], logs: prev.logs }));
    setForm({ payee: "", amount: "", date: "", bank: "", email: "" });
    addLog("Check added");
  }

  function updateCheck(id: string, patch: Partial<Check>) {
    setState((prev) => ({
      ...prev,
      checks: prev.checks.map((c) => (c.id === id ? { ...c, ...patch } : c)),
    }));
  }

  function deleteCheck(id: string) {
    setState((prev) => ({
      ...prev,
      checks: prev.checks.filter((c) => c.id !== id),
    }));
    addLog("Check deleted");
  }

  async function sendEmail(check: Check) {
    if (!check.email) {
      addLog(`No email for ${check.payee}`);
      return false;
    }
    await new Promise((r) => setTimeout(r, 400));
    addLog(`Email reminder sent to ${check.email} for check ${check.id}`);
    return true;
  }

  async function runScheduler() {
    const now = new Date();
    const upcoming = state.checks
      .filter((c) => c.status === "pending")
      .filter((c) => {
        const d = new Date(c.date + "T00:00:00");
        const diffDays = Math.ceil(
          (d.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
        );
        return diffDays >= 0 && diffDays <= reminderDays;
      });
    for (const c of upcoming) {
      if (c._remindedAt) continue;
      const ok = await sendEmail(c);
      if (ok) updateCheck(c.id, { _remindedAt: new Date().toISOString() });
    }
  }

  function markPrinted(id: string) {
    updateCheck(id, { printed: true, status: "printed" });
    addLog(`Check ${id} marked printed`);
  }

  const counts = {
    all: state.checks.length,
    pending: state.checks.filter((c) => c.status === "pending").length,
    printed: state.checks.filter((c) => c.printed).length,
  };

  const visible = state.checks.filter((c) =>
    filter === "all" ? true : filter === "pending" ? c.status === "pending" : c.printed
  );

  return (
    <div className="min-h-screen p-6 bg-gray-50 font-sans">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-2xl font-semibold mb-4">CheckPrinterPlus</h1>

        {/* Add Form */}
        <form
          onSubmit={addCheck}
          className="bg-white p-4 rounded shadow-sm mb-6 grid grid-cols-1 md:grid-cols-2 gap-4"
        >
          <input
            value={form.payee}
            onChange={(e) => setForm({ ...form, payee: e.target.value })}
            placeholder="Payee"
            className="border p-2 rounded"
          />
          <input
            value={form.amount}
            onChange={(e) => setForm({ ...form, amount: e.target.value })}
            type="number"
            placeholder="Amount"
            className="border p-2 rounded"
          />
          <input
            value={form.date}
            onChange={(e) => setForm({ ...form, date: e.target.value })}
            type="date"
            className="border p-2 rounded"
          />
          <select
            value={form.bank}
            onChange={(e) => setForm({ ...form, bank: e.target.value })}
            className="border p-2 rounded"
          >
            <option value="">Select Bank</option>
            {UAE_BANKS.map((b) => (
              <option key={b}>{b}</option>
            ))}
          </select>
          <input
            value={form.email}
            onChange={(e) => setForm({ ...form, email: e.target.value })}
            type="email"
            placeholder="Reminder Email"
            className="border p-2 rounded md:col-span-2"
          />
          <button
            type="submit"
            className="px-3 py-2 bg-blue-600 text-white rounded md:col-span-2"
          >
            Add Check
          </button>
        </form>

        {/* Filters */}
        <div className="flex gap-3 mb-4">
          <button
            className={`px-3 py-1 rounded ${
              filter === "all" ? "bg-gray-900 text-white" : "border"
            }`}
            onClick={() => setFilter("all")}
          >
            All ({counts.all})
          </button>
          <button
            className={`px-3 py-1 rounded ${
              filter === "pending" ? "bg-yellow-400" : "border"
            }`}
            onClick={() => setFilter("pending")}
          >
            Pending ({counts.pending})
          </button>
          <button
            className={`px-3 py-1 rounded ${
              filter === "printed" ? "bg-green-400" : "border"
            }`}
            onClick={() => setFilter("printed")}
          >
            Printed ({counts.printed})
          </button>
        </div>

        {/* Table */}
        <table className="w-full bg-white rounded shadow-sm text-sm">
          <thead>
            <tr className="text-left border-b">
              <th className="p-2">Payee</th>
              <th>Date</th>
              <th>Amount</th>
              <th>Bank</th>
              <th>Email</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {visible.map((c) => (
              <tr key={c.id} className="border-t">
                <td className="p-2">{c.payee}</td>
                <td>{c.date}</td>
                <td>{c.amount.toFixed(2)}</td>
                <td>{c.bank}</td>
                <td>{c.email}</td>
                <td>{c.printed ? "Printed" : "Pending"}</td>
                <td className="p-2">
                  <button
                    className="px-2 py-1 border rounded mr-2"
                    onClick={() => setSelected(c)}
                  >
                    Preview
                  </button>
                  <button
                    className="px-2 py-1 border rounded mr-2"
                    onClick={() => markPrinted(c.id)}
                  >
                    Mark Printed
                  </button>
                  <button
                    className="px-2 py-1 border rounded text-red-600"
                    onClick={() => deleteCheck(c.id)}
                  >
                    Delete
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        {/* Print Preview */}
        {selected && (
          <div className="mt-6 bg-white p-4 rounded shadow-sm">
            <h2 className="font-medium mb-2">Print Preview</h2>
            <div className="border p-3 rounded relative overflow-hidden">
              {(() => {
                const tpl = bankTemplates[selected.bank];
                if (!tpl) return <div>No template for this bank</div>;
                return (
                  <div
                    style={{
                      width: tpl.width + "mm",
                      height: tpl.height + "mm",
                      position: "relative",
                      border: "1px solid gray",
                    }}
                  >
                    <div
                      style={{ position: "absolute", left: tpl.fields.payee.x, top: tpl.fields.payee.y }}
                    >
                      {selected.payee}
                    </div>
                    <div
                      style={{ position: "absolute", left: tpl.fields.date.x, top: tpl.fields.date.y }}
                    >
                      {selected.date}
                    </div>
                    <div
                      style={{ position: "absolute", left: tpl.fields.amount.x, top: tpl.fields.amount.y }}
                    >
                      {selected.amount.toFixed(2)}
                    </div>
                    <div
                      style={{ position: "absolute", left: tpl.fields.amountWords.x, top: tpl.fields.amountWords.y }}
                    >
                      {toWords(selected.amount)}
                    </div>
                  </div>
                );
              })()}
              <div className="mt-3 flex gap-2">
                <button
                  onClick={() => window.print()}
                  className="px-3 py-2 border rounded"
                >
                  Print
                </button>
                <button
                  onClick={() => {
                    markPrinted(selected.id);
                    setSelected(null);
                  }}
                  className="px-3 py-2 bg-green-600 text-white rounded"
                >
                  Mark Printed
                </button>
                <button
                  onClick={() => setSelected(null)}
                  className="px-3 py-2 border rounded"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}