'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';

interface StoreDetail {
  id: string;
  name: string;
  description: string | null;
  street1: string | null;
  street2: string | null;
  city: string | null;
  state: string | null;
  zip: string | null;
  country: string | null;
}

interface FormState {
  name: string;
  description: string;
  street1: string;
  street2: string;
  city: string;
  state: string;
  zip: string;
  country: string;
}

function fromStore(s: StoreDetail): FormState {
  return {
    name: s.name ?? '',
    description: s.description ?? '',
    street1: s.street1 ?? '',
    street2: s.street2 ?? '',
    city: s.city ?? '',
    state: s.state ?? '',
    zip: s.zip ?? '',
    country: s.country ?? 'US',
  };
}

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

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

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

  const saveMut = useMutation({
    mutationFn: () => api.stores.update(storeId!, form!),
    onSuccess: () => {
      setSavedAt(new Date().toLocaleTimeString());
      setError(null);
      qc.invalidateQueries({ queryKey: ['seller-store', storeId] });
    },
    onError: () => setError('Failed to save changes.'),
  });

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

  return (
    <section className="max-w-2xl space-y-5 rounded-md border border-forest/20 bg-white p-6">
      <header>
        <h2 className="text-lg font-semibold text-ink">Store profile</h2>
        <p className="text-sm text-ink/60">Basic details about your store.</p>
      </header>

      <Field label="Store name">
        <input
          value={form.name}
          onChange={(e) => setForm({ ...form, name: e.target.value })}
          className={cls}
        />
      </Field>
      <Field label="Description">
        <textarea
          rows={3}
          value={form.description}
          onChange={(e) => setForm({ ...form, description: e.target.value })}
          className={cls}
        />
      </Field>
      <div className="grid grid-cols-2 gap-3">
        <Field label="Street">
          <input
            value={form.street1}
            onChange={(e) => setForm({ ...form, street1: e.target.value })}
            className={cls}
          />
        </Field>
        <Field label="Street 2 (optional)">
          <input
            value={form.street2}
            onChange={(e) => setForm({ ...form, street2: e.target.value })}
            className={cls}
          />
        </Field>
      </div>
      <div className="grid grid-cols-3 gap-3">
        <Field label="City">
          <input
            value={form.city}
            onChange={(e) => setForm({ ...form, city: e.target.value })}
            className={cls}
          />
        </Field>
        <Field label="State">
          <input
            value={form.state}
            onChange={(e) => setForm({ ...form, state: e.target.value })}
            className={cls}
          />
        </Field>
        <Field label="Zip">
          <input
            value={form.zip}
            onChange={(e) => setForm({ ...form, zip: e.target.value })}
            className={cls}
          />
        </Field>
      </div>
      <Field label="Country">
        <input
          value={form.country}
          onChange={(e) => setForm({ ...form, country: e.target.value })}
          className={cls}
        />
      </Field>

      <div className="flex items-center gap-3 pt-2">
        <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>}
        {error && <span className="text-xs text-terracotta">{error}</span>}
      </div>
    </section>
  );
}

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>
  );
}