"use client";

/**
 * PalmistryForm — interactive self-assessment + optional AI vision upload.
 *
 * Flow:
 *   1. User can upload a palm photo. We POST to /api/palmistry/vision and
 *      pre-fill the form fields from AI's analysis (with confidence score).
 *   2. User reviews / overrides each field.
 *   3. Submit GETs the page with all fields as URL params — server renders
 *      the structured report and AI insight panel.
 *
 * Why GET not POST: keeps the page shareable/bookmarkable and stateless;
 * the engine is pure-function so server can re-run with URL params alone.
 */
import { useState, useTransition, useRef } from "react";
import { Camera, Upload, Loader2, Sparkles } from "lucide-react";

type LineLength = "long" | "medium" | "short" | "absent" | "unknown";
type LineQuality = "clear" | "broken" | "chained" | "forked" | "unknown";
type HandShape = "earth" | "air" | "fire" | "water" | "unknown";

const LENGTH_LABELS: Record<LineLength, string> = {
  long: "Dài",
  medium: "Trung bình",
  short: "Ngắn",
  absent: "Không có",
  unknown: "Chưa biết",
};

const QUALITY_LABELS: Record<LineQuality, string> = {
  clear: "Rõ, liền mạch",
  broken: "Đứt đoạn",
  chained: "Lằn xích / mờ",
  forked: "Có nhánh",
  unknown: "Chưa biết",
};

const SHAPE_LABELS: Record<HandShape, string> = {
  earth: "Đất (vuông + ngón ngắn)",
  air: "Khí (vuông + ngón dài)",
  fire: "Lửa (lòng dài + ngón ngắn)",
  water: "Nước (lòng dài + ngón dài)",
  unknown: "Chưa biết",
};

const LINE_LABELS = {
  heart: "Đường Tim (gần các ngón nhất)",
  head: "Đường Trí (ngang giữa)",
  life: "Đường Mệnh (vòng quanh ngón cái)",
  fate: "Đường Sự Nghiệp (dọc lên ngón giữa)",
} as const;

type LineKey = keyof typeof LINE_LABELS;

type FormState = {
  shape: HandShape;
  heart: { length: LineLength; quality: LineQuality };
  head: { length: LineLength; quality: LineQuality };
  life: { length: LineLength; quality: LineQuality };
  fate: { length: LineLength; quality: LineQuality };
  thumbStrong: boolean;
  fingersLong: boolean;
  mountVenus: boolean;
  mountJupiter: boolean;
  marriageLines: 0 | 1 | 2 | 3;
};

const DEFAULT_STATE: FormState = {
  shape: "unknown",
  heart: { length: "unknown", quality: "unknown" },
  head: { length: "unknown", quality: "unknown" },
  life: { length: "unknown", quality: "unknown" },
  fate: { length: "unknown", quality: "unknown" },
  thumbStrong: false,
  fingersLong: false,
  mountVenus: false,
  mountJupiter: false,
  marriageLines: 1,
};

function asLineLength(v: string | undefined): LineLength {
  return ["long", "medium", "short", "absent", "unknown"].includes(v ?? "")
    ? (v as LineLength)
    : "unknown";
}
function asLineQuality(v: string | undefined): LineQuality {
  return ["clear", "broken", "chained", "forked", "unknown"].includes(v ?? "")
    ? (v as LineQuality)
    : "unknown";
}
function asShape(v: string | undefined): HandShape {
  return ["earth", "air", "fire", "water", "unknown"].includes(v ?? "")
    ? (v as HandShape)
    : "unknown";
}

export function PalmistryForm({
  initial,
}: {
  initial: Partial<FormState> & Record<string, string | undefined>;
}) {
  const [state, setState] = useState<FormState>({
    ...DEFAULT_STATE,
    shape: asShape(initial.shape as string | undefined),
    heart: {
      length: asLineLength(initial.heartL as string | undefined),
      quality: asLineQuality(initial.heartQ as string | undefined),
    },
    head: {
      length: asLineLength(initial.headL as string | undefined),
      quality: asLineQuality(initial.headQ as string | undefined),
    },
    life: {
      length: asLineLength(initial.lifeL as string | undefined),
      quality: asLineQuality(initial.lifeQ as string | undefined),
    },
    fate: {
      length: asLineLength(initial.fateL as string | undefined),
      quality: asLineQuality(initial.fateQ as string | undefined),
    },
    thumbStrong: initial.thumb === "1",
    fingersLong: initial.fingers === "1",
    mountVenus: initial.venus === "1",
    mountJupiter: initial.jupiter === "1",
    marriageLines: ((): 0 | 1 | 2 | 3 => {
      const n = parseInt((initial.marriage as string) ?? "1", 10);
      return n >= 0 && n <= 3 ? (n as 0 | 1 | 2 | 3) : 1;
    })(),
  });

  const [uploading, startUploading] = useTransition();
  const [uploadResult, setUploadResult] = useState<{
    confidence: number;
    notes: string;
  } | null>(null);
  const [uploadError, setUploadError] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  function uploadImage(file: File) {
    setUploadError(null);
    setUploadResult(null);
    startUploading(async () => {
      try {
        const fd = new FormData();
        fd.append("image", file);
        const r = await fetch("/api/palmistry/vision", {
          method: "POST",
          body: fd,
        });
        const json = await r.json();
        if (!r.ok || !json.ok) {
          setUploadError(json.error ?? `Lỗi ${r.status}`);
          return;
        }
        const f = json.fields;
        setState((prev) => ({
          ...prev,
          shape: asShape(f.shape),
          heart: {
            length: asLineLength(f.heart?.length),
            quality: asLineQuality(f.heart?.quality),
          },
          head: {
            length: asLineLength(f.head?.length),
            quality: asLineQuality(f.head?.quality),
          },
          life: {
            length: asLineLength(f.life?.length),
            quality: asLineQuality(f.life?.quality),
          },
          fate: {
            length: asLineLength(f.fate?.length),
            quality: asLineQuality(f.fate?.quality),
          },
        }));
        setUploadResult({ confidence: f.confidence ?? 0, notes: f.notes ?? "" });
      } catch (e) {
        setUploadError(e instanceof Error ? e.message : "Lỗi không xác định");
      }
    });
  }

  return (
    <form
      method="GET"
      action="/ban-tay-hinh-long"
      className="border-stroke-subtle bg-bg-elevated/40 mb-6 rounded-2xl border p-5 lg:p-6"
    >
      {/* Vision uploader */}
      <fieldset className="border-brand-gold/40 bg-brand-gold/5 mb-5 rounded-xl border p-4">
        <legend className="text-brand-gold flex items-center gap-1.5 px-2 text-xs tracking-wider uppercase">
          <Sparkles className="h-3.5 w-3.5" />
          Quét ảnh tay (AI gợi ý)
        </legend>
        <p className="text-ink-secondary mt-1 text-xs leading-relaxed">
          Chụp hoặc tải lên ảnh bàn tay (mở rõ, đủ sáng) để AI tự đoán đặc điểm và điền vào form bên
          dưới. Bạn có thể chỉnh tay sau. Cần đăng nhập, FREE 3 ảnh/24h.
        </p>
        <div className="mt-3 flex flex-wrap gap-2">
          <button
            type="button"
            onClick={() => fileInputRef.current?.click()}
            disabled={uploading}
            className="border-stroke-default text-ink-primary hover:bg-bg-inset/60 inline-flex items-center gap-2 rounded-md border bg-transparent px-3 py-2 text-sm disabled:opacity-50"
          >
            {uploading ? (
              <>
                <Loader2 className="h-4 w-4 animate-spin" />
                Đang phân tích…
              </>
            ) : (
              <>
                <Upload className="h-4 w-4" />
                Tải ảnh từ máy
              </>
            )}
          </button>
          <button
            type="button"
            onClick={() => {
              if (fileInputRef.current) {
                fileInputRef.current.setAttribute("capture", "environment");
                fileInputRef.current.click();
              }
            }}
            disabled={uploading}
            className="border-stroke-default text-ink-primary hover:bg-bg-inset/60 inline-flex items-center gap-2 rounded-md border bg-transparent px-3 py-2 text-sm disabled:opacity-50"
          >
            <Camera className="h-4 w-4" />
            Chụp bằng máy ảnh
          </button>
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            className="hidden"
            onChange={(e) => {
              const file = e.target.files?.[0];
              if (file) uploadImage(file);
              if (fileInputRef.current) fileInputRef.current.value = "";
            }}
          />
        </div>
        {uploadError ? <p className="text-brand-red mt-3 text-xs">{uploadError}</p> : null}
        {uploadResult ? (
          <div className="border-brand-gold/30 bg-bg-inset/60 mt-3 rounded-md border border-dashed p-3 text-xs">
            <div className="flex items-baseline justify-between">
              <span className="text-ink-primary font-medium">AI đã điền form bên dưới</span>
              <span className="text-brand-gold font-mono">
                Độ chắc chắn: {uploadResult.confidence}%
              </span>
            </div>
            {uploadResult.notes ? (
              <p className="text-ink-secondary mt-1.5 leading-relaxed">{uploadResult.notes}</p>
            ) : null}
            {uploadResult.confidence < 40 ? (
              <p className="text-brand-red mt-1.5">
                Độ chắc thấp — hãy kiểm tra và điều chỉnh các trường bên dưới trước khi phân tích.
              </p>
            ) : null}
          </div>
        ) : null}
      </fieldset>

      {/* Hand shape */}
      <div className="mb-4">
        <label className="text-ink-muted block text-xs">Hình dạng bàn tay</label>
        <select
          name="shape"
          value={state.shape}
          onChange={(e) => setState({ ...state, shape: e.target.value as HandShape })}
          className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold mt-1 w-full rounded-md border px-3 py-2 text-sm focus:outline-none"
        >
          {Object.entries(SHAPE_LABELS).map(([k, v]) => (
            <option key={k} value={k}>
              {v}
            </option>
          ))}
        </select>
      </div>

      {/* 4 main lines */}
      <div className="space-y-3">
        {(Object.keys(LINE_LABELS) as LineKey[]).map((key) => (
          <fieldset key={key} className="border-stroke-subtle/60 rounded-lg border p-3">
            <legend className="text-brand-gold px-2 text-xs tracking-wider uppercase">
              {LINE_LABELS[key]}
            </legend>
            <div className="grid grid-cols-2 gap-2">
              <div>
                <label className="text-ink-muted block text-[11px]">Độ dài</label>
                <select
                  name={`${key}L`}
                  value={state[key].length}
                  onChange={(e) =>
                    setState({
                      ...state,
                      [key]: { ...state[key], length: e.target.value as LineLength },
                    })
                  }
                  className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold mt-0.5 w-full rounded-md border px-2 py-1.5 text-xs focus:outline-none"
                >
                  {Object.entries(LENGTH_LABELS).map(([k, v]) => (
                    <option key={k} value={k}>
                      {v}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label className="text-ink-muted block text-[11px]">Chất lượng</label>
                <select
                  name={`${key}Q`}
                  value={state[key].quality}
                  onChange={(e) =>
                    setState({
                      ...state,
                      [key]: { ...state[key], quality: e.target.value as LineQuality },
                    })
                  }
                  className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold mt-0.5 w-full rounded-md border px-2 py-1.5 text-xs focus:outline-none"
                >
                  {Object.entries(QUALITY_LABELS).map(([k, v]) => (
                    <option key={k} value={k}>
                      {v}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          </fieldset>
        ))}
      </div>

      {/* Supporting traits */}
      <fieldset className="border-stroke-subtle/60 mt-3 rounded-lg border p-3">
        <legend className="text-brand-gold px-2 text-xs tracking-wider uppercase">
          Đặc điểm phụ
        </legend>
        <div className="grid grid-cols-2 gap-2 text-xs lg:grid-cols-4">
          {(
            [
              ["thumb", "Ngón cái cứng cáp", "thumbStrong"],
              ["fingers", "Ngón dài hơn lòng", "fingersLong"],
              ["venus", "Gò Venus đầy đặn", "mountVenus"],
              ["jupiter", "Gò Jupiter rõ", "mountJupiter"],
            ] as const
          ).map(([fn, label, sk]) => (
            <label key={fn} className="text-ink-secondary flex cursor-pointer items-center gap-2">
              <input
                type="checkbox"
                name={fn}
                value="1"
                checked={state[sk]}
                onChange={(e) => setState({ ...state, [sk]: e.target.checked })}
                className="accent-brand-gold"
              />
              {label}
            </label>
          ))}
        </div>
      </fieldset>

      {/* Marriage lines */}
      <div className="mt-3">
        <label className="text-ink-muted block text-xs">Số đường hôn nhân quan sát được</label>
        <select
          name="marriage"
          value={String(state.marriageLines)}
          onChange={(e) =>
            setState({ ...state, marriageLines: parseInt(e.target.value, 10) as 0 | 1 | 2 | 3 })
          }
          className="bg-bg-inset border-stroke-default text-ink-primary focus:border-brand-gold mt-1 w-full rounded-md border px-3 py-2 text-sm focus:outline-none"
        >
          <option value="0">Không có / chưa rõ</option>
          <option value="1">1 đường (phổ biến)</option>
          <option value="2">2 đường</option>
          <option value="3">3 đường trở lên</option>
        </select>
      </div>

      <button
        type="submit"
        className="bg-brand-gold text-bg-base mt-5 w-full rounded-md px-4 py-2.5 text-sm font-semibold"
      >
        Phân tích bàn tay
      </button>
    </form>
  );
}