"use client";

import { useState } from "react";
import { Download, Mail, Settings } from "lucide-react";
import { CountryFlag } from "@/components/CountryFlag";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { getCompetitors, getCuvees, getMarkets } from "@/lib/data";
import { useOenoscopeStore } from "@/lib/store";
import type { Market } from "@/lib/types";

export default function SettingsPage() {
  const [activeCuvees, setActiveCuvees] = useState(getCuvees().map((cuvee) => cuvee.id));
  const [priorityMarkets, setPriorityMarkets] = useState<Market[]>(["FR", "US", "UK", "JP", "HK", "SG"]);
  const [frequency, setFrequency] = useState("hebdomadaire");
  const [recipients, setRecipients] = useState(["philippe.boutaud@domainedechevalier.com", "adrien.bernard@domainedechevalier.com"]);
  const [competitors, setCompetitors] = useState(getCompetitors().map((competitor) => competitor.name));
  const locale = useOenoscopeStore((state) => state.locale);
  const setLocale = useOenoscopeStore((state) => state.setLocale);

  function toggleCuvee(id: string) {
    setActiveCuvees((current) => (current.includes(id) ? current.filter((item) => item !== id) : [...current, id]));
  }

  function toggleMarket(code: Market) {
    setPriorityMarkets((current) => (current.includes(code) ? current.filter((item) => item !== code) : [...current, code]));
  }

  return (
    <div className="space-y-8">
      <section>
        <Badge tone="gold">Configuration</Badge>
        <h1 className="mt-4 font-serif text-5xl font-semibold text-bordeaux-deep">Paramètres</h1>
        <p className="mt-3 max-w-2xl text-sm leading-relaxed text-charcoal">
          Réglages de démonstration. Les changements sont locaux à la session.
        </p>
      </section>

      <div className="grid gap-6 xl:grid-cols-2">
        <Card>
          <CardHeader>
            <div>
              <CardTitle>Cuvées suivies</CardTitle>
              <CardDescription>Activer ou masquer une étiquette dans les rapports.</CardDescription>
            </div>
            <Settings className="h-5 w-5 text-gold" strokeWidth={1.5} />
          </CardHeader>
          <div className="space-y-3">
            {getCuvees().map((cuvee) => (
              <label key={cuvee.id} className="flex items-center justify-between rounded-md border border-gold/20 bg-ivory p-4">
                <span>
                  <span className="block font-medium text-bordeaux-deep">{cuvee.name}</span>
                  <span className="text-xs text-smoke">{cuvee.appellation}</span>
                </span>
                <input type="checkbox" checked={activeCuvees.includes(cuvee.id)} onChange={() => toggleCuvee(cuvee.id)} className="h-5 w-5 accent-bordeaux-deep" />
              </label>
            ))}
          </div>
        </Card>

        <Card>
          <CardHeader>
            <div>
              <CardTitle>Marchés prioritaires</CardTitle>
              <CardDescription>Marchés à faire remonter dans les vues exécutives.</CardDescription>
            </div>
          </CardHeader>
          <div className="grid grid-cols-2 gap-3">
            {getMarkets()
              .filter((market) => market.code !== "OTHER")
              .map((market) => (
                <button
                  key={market.code}
                  type="button"
                  onClick={() => toggleMarket(market.code)}
                  className={`flex items-center gap-3 rounded-md border p-3 text-left text-sm transition-colors ${
                    priorityMarkets.includes(market.code)
                      ? "border-bordeaux-deep bg-bordeaux-deep text-ivory"
                      : "border-gold/25 bg-ivory hover:bg-gold/10"
                  }`}
                >
                  <CountryFlag code={market.code} />
                  {market.name}
                </button>
              ))}
          </div>
        </Card>
      </div>

      <div className="grid gap-6 xl:grid-cols-[0.8fr_1.2fr]">
        <Card>
          <CardHeader>
            <div>
              <CardTitle>Rapports email</CardTitle>
              <CardDescription>Fréquence et destinataires.</CardDescription>
            </div>
            <Mail className="h-5 w-5 text-gold" strokeWidth={1.5} />
          </CardHeader>
          <label className="text-sm text-smoke">Fréquence</label>
          <select value={frequency} onChange={(event) => setFrequency(event.target.value)} className="mt-2 h-10 w-full rounded-md border border-gold/30 bg-ivory px-3 text-sm">
            <option value="quotidienne">Quotidienne</option>
            <option value="hebdomadaire">Hebdomadaire</option>
            <option value="mensuelle">Mensuelle</option>
          </select>
          <Separator className="my-5" />
          <div className="space-y-3">
            {recipients.map((email, index) => (
              <input
                key={email}
                value={email}
                onChange={(event) =>
                  setRecipients((current) => current.map((item, itemIndex) => (itemIndex === index ? event.target.value : item)))
                }
                className="h-10 w-full rounded-md border border-gold/30 bg-ivory px-3 text-sm"
              />
            ))}
          </div>
          <Button variant="secondary" className="mt-4" onClick={() => setRecipients((current) => [...current, ""])}>
            Ajouter un destinataire
          </Button>
        </Card>

        <Card>
          <CardHeader>
            <div>
              <CardTitle>Concurrents suivis</CardTitle>
              <CardDescription>Liste éditable pour les comparaisons.</CardDescription>
            </div>
          </CardHeader>
          <div className="grid gap-3 md:grid-cols-2">
            {competitors.map((name, index) => (
              <input
                key={`${name}-${index}`}
                value={name}
                onChange={(event) =>
                  setCompetitors((current) => current.map((item, itemIndex) => (itemIndex === index ? event.target.value : item)))
                }
                className="h-10 rounded-md border border-gold/30 bg-ivory px-3 text-sm"
              />
            ))}
          </div>
          <Button variant="secondary" className="mt-4" onClick={() => setCompetitors((current) => [...current, ""])}>
            Ajouter un domaine
          </Button>
        </Card>
      </div>

      <Card>
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div>
            <CardTitle>Interface et données</CardTitle>
            <CardDescription>Langue, export complet et accès démo.</CardDescription>
          </div>
          <div className="flex items-center gap-2">
            {(["fr", "en"] as const).map((option) => (
              <Button key={option} variant={locale === option ? "primary" : "secondary"} onClick={() => setLocale(option)}>
                {option.toUpperCase()}
              </Button>
            ))}
            <Button>
              <Download className="h-4 w-4" strokeWidth={1.5} />
              Exporter toutes les données
            </Button>
          </div>
        </div>
      </Card>
    </div>
  );
}