'use client';

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useEffect, useState } from 'react';
import { api } from '@/lib/api';
import { useSelectedStoreId } from '@/lib/stores/store-context';
import { ParcelPresetFormDialog } from '@/components/seller/parcel-preset-form-dialog';

interface StoreSettings {
  flat_shipping_rate: number;
  free_shipping_threshold: number | null;
  minimum_order_amount: number | null;
  processing_days: number;
  return_window_days: number;
  return_policy_text: string | null;
}

interface ParcelPreset {
  id: string;
  name: string;
  weight_oz: number;
  length_in: number;
  width_in: number;
  height_in: number;
  is_default: boolean;
}

export default function ShippingPage() {
  const storeId = useSelectedStoreId();
  const qc = useQueryClient();
  const [form, setForm] = useState<StoreSettings | null>(null);
  const [savedAt, setSavedAt] = useState<string | null>(null);

  const settingsQ = useQuery({
    queryKey: ['seller-store-settings', storeId],
    enabled: !!storeId,
    queryFn: () => api.stores.getSettings(storeId!),
  });

  useEffect(() => {
    const settings = settingsQ.data?.data as StoreSettings | undefined;
    if (settings && !form) {
      // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing server data to local form state (once)
      setForm(settings);
    }
  }, [settingsQ.data, form]);

  const presetsQ = useQuery({
    queryKey: ['parcel-presets', storeId],
    enabled: !!storeId,
    queryFn: () => api.stores.parcelPresets.list(storeId!),
  });

  const presets: ParcelPreset[] = (presetsQ.data?.data ?? []) as ParcelPreset[];

  const saveMut = useMutation({
    mutationFn: () =>
      api.stores.updateSettings(
        storeId!,
        form! as unknown as Parameters<typeof api.stores.updateSettings>[1],
      ),
    onSuccess: () => {
      setSavedAt(new Date().toLocaleTimeString());
      qc.invalidateQueries({ queryKey: ['seller-store-settings', storeId] });
    },
  });

  const deletePresetMut = useMutation({
    mutationFn: (presetId: string) => api.stores.parcelPresets.delete(storeId!, presetId),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['parcel-presets', storeId] }),
  });
  const deleteError = deletePresetMut.error as { message?: string } | null;

  if (!form) return <div className="text-sm text-ink/60">Loading…</div>;

  return (
    <div className="space-y-6">
      <section className="max-w-2xl rounded-md border border-forest/20 bg-white p-6">
        <h2 className="text-lg font-semibold text-ink">Shipping &amp; returns</h2>
        <div className="mt-4 grid grid-cols-2 gap-3">
          <Field label="Flat shipping rate (cents)">
            <input
              inputMode="numeric"
              value={String(form.flat_shipping_rate ?? 0)}
              onChange={(e) => setForm({ ...form, flat_shipping_rate: Number(e.target.value.replace(/\D/g, '')) })}
              className={cls}
            />
          </Field>
          <Field label="Free shipping threshold (cents)">
            <input
              inputMode="numeric"
              value={String(form.free_shipping_threshold ?? '')}
              onChange={(e) => {
                const v = e.target.value.replace(/\D/g, '');
                setForm({ ...form, free_shipping_threshold: v ? Number(v) : null });
              }}
              className={cls}
            />
          </Field>
          <Field label="Processing days (1–7)">
            <input
              inputMode="numeric"
              value={String(form.processing_days)}
              onChange={(e) => {
                const v = Number(e.target.value.replace(/\D/g, ''));
                setForm({ ...form, processing_days: Math.max(1, Math.min(7, v || 1)) });
              }}
              className={cls}
            />
          </Field>
          <Field label="Return window (0–90 days)">
            <input
              inputMode="numeric"
              value={String(form.return_window_days)}
              onChange={(e) => {
                const v = Number(e.target.value.replace(/\D/g, ''));
                setForm({ ...form, return_window_days: Math.max(0, Math.min(90, v)) });
              }}
              className={cls}
            />
          </Field>
        </div>
        <div className="mt-3">
          <Field label="Return policy description">
            <textarea
              rows={3}
              value={form.return_policy_text ?? ''}
              onChange={(e) => setForm({ ...form, return_policy_text: e.target.value || null })}
              className={cls}
            />
          </Field>
        </div>
        <div className="mt-4 flex items-center gap-3">
          <button
            onClick={() => saveMut.mutate()}
            disabled={saveMut.isPending}
            className="rounded bg-forest px-4 py-2 text-sm font-semibold text-white hover:bg-forest/90 disabled:opacity-50"
          >
            {saveMut.isPending ? 'Saving…' : 'Save changes'}
          </button>
          {savedAt && <span className="text-xs text-ink/60">Saved at {savedAt}</span>}
        </div>
      </section>

      <section className="max-w-2xl rounded-md border border-forest/20 bg-white p-6">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-lg font-semibold text-ink">Parcel presets</h2>
            <p className="text-sm text-ink/60">Package dimensions you ship with most often.</p>
          </div>
          <ParcelPresetFormDialog
            storeId={storeId!}
            trigger={
              <button className="rounded border border-forest/20 px-3 py-1.5 text-sm hover:bg-bone">+ Add preset</button>
            }
          />
        </div>

        {deleteError && (
          <p className="mt-3 text-sm text-terracotta">
            {deleteError.message ?? 'Failed to delete preset.'}
          </p>
        )}
        {presetsQ.isLoading && <p className="mt-4 text-sm text-ink/60">Loading…</p>}
        {!presetsQ.isLoading && presets.length === 0 && (
          <p className="mt-4 text-sm text-ink/60">No presets yet. Add one before buying labels.</p>
        )}
        {presets.length > 0 && (
          <table className="mt-4 w-full text-sm">
            <thead className="bg-bone/60">
              <tr>
                <Th>Name</Th><Th>Weight (oz)</Th><Th>Dimensions (in)</Th><Th>Default</Th><Th></Th>
              </tr>
            </thead>
            <tbody>
              {presets.map((p) => (
                <tr key={p.id} className="border-t border-forest/10">
                  <td className="px-3 py-2">{p.name}</td>
                  <td className="px-3 py-2">{p.weight_oz}</td>
                  <td className="px-3 py-2">{p.length_in} × {p.width_in} × {p.height_in}</td>
                  <td className="px-3 py-2">{p.is_default ? '✓' : ''}</td>
                  <td className="px-3 py-2 text-right">
                    <div className="flex justify-end gap-2">
                      <ParcelPresetFormDialog
                        storeId={storeId!}
                        preset={p}
                        trigger={<button className="text-forest hover:underline">Edit</button>}
                      />
                      <button
                        onClick={() => {
                          if (confirm(`Delete preset "${p.name}"?`)) deletePresetMut.mutate(p.id);
                        }}
                        disabled={deletePresetMut.isPending}
                        className="text-terracotta hover:underline disabled:opacity-50"
                      >
                        Delete
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>
    </div>
  );
}

const cls = 'w-full rounded border border-forest/20 bg-white px-2 py-1.5 text-sm';

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label className="flex flex-col gap-1 text-sm">
      <span className="text-xs uppercase tracking-wide text-ink/60">{label}</span>
      {children}
    </label>
  );
}

function Th({ children }: { children?: React.ReactNode }) {
  return <th className="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-ink/60">{children}</th>;
}