'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Button,
  Input,
} from '@/components/ui';
import { createWeeklyCheckInSession } from '@/actions/weekly-checkin';
import { getWeekYearLabel } from '@/lib/date-utils';

export default function NewWeeklyCheckInPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
  const [title, setTitle] = useState(() => getWeekYearLabel(new Date(new Date().toISOString().split('T')[0])));
  const [isTitleManuallyEdited, setIsTitleManuallyEdited] = useState(false);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    setLoading(true);

    const formData = new FormData(e.currentTarget);
    const participant = formData.get('participant') as string;
    const date = selectedDate ? new Date(selectedDate) : undefined;

    if (!title || !participant) {
      setError('Veuillez remplir tous les champs');
      setLoading(false);
      return;
    }

    const result = await createWeeklyCheckInSession({ title, participant, date });

    if (!result.success) {
      setError(result.error || 'Une erreur est survenue');
      setLoading(false);
      return;
    }

    router.push(`/weekly-checkin/${result.data?.id}`);
  }

  function handleDateChange(e: React.ChangeEvent<HTMLInputElement>) {
    const newDate = e.target.value;
    setSelectedDate(newDate);
    // Only update title if user hasn't manually modified it
    if (!isTitleManuallyEdited) {
      setTitle(getWeekYearLabel(new Date(newDate)));
    }
  }

  function handleTitleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setTitle(e.target.value);
    setIsTitleManuallyEdited(true);
  }

  return (
    <main className="mx-auto max-w-2xl px-4 py-8">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <span>📝</span>
            Nouveau Check-in Hebdomadaire
          </CardTitle>
          <CardDescription>
            Créez un check-in hebdomadaire pour faire le point sur la semaine avec votre
            collaborateur
          </CardDescription>
        </CardHeader>

        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            {error && (
              <div className="rounded-lg border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive">
                {error}
              </div>
            )}

            <Input
              label="Titre du check-in"
              name="title"
              placeholder="Ex: Check-in semaine du 15 janvier"
              value={title}
              onChange={handleTitleChange}
              required
            />

            <Input
              label="Nom du collaborateur"
              name="participant"
              placeholder="Ex: Jean Dupont"
              required
            />

            <div>
              <label htmlFor="date" className="block text-sm font-medium text-foreground mb-1">
                Date du check-in
              </label>
              <input
                id="date"
                name="date"
                type="date"
                value={selectedDate}
                onChange={handleDateChange}
                required
                className="w-full rounded-lg border border-border bg-input px-3 py-2 text-foreground outline-none focus:border-primary focus:ring-2 focus:ring-primary/20"
              />
            </div>

            <div className="rounded-lg border border-border bg-card-hover p-4">
              <h3 className="font-medium text-foreground mb-2">Comment ça marche ?</h3>
              <ol className="text-sm text-muted space-y-1 list-decimal list-inside">
                <li>
                  <strong>Ce qui s&apos;est bien passé</strong> : Notez les réussites et points
                  positifs de la semaine
                </li>
                <li>
                  <strong>Ce qui s&apos;est mal passé</strong> : Identifiez les difficultés et
                  points d&apos;amélioration
                </li>
                <li>
                  <strong>Enjeux du moment</strong> : Décrivez sur quoi vous vous concentrez
                  actuellement
                </li>
                <li>
                  <strong>Prochains enjeux</strong> : Définissez ce sur quoi vous allez vous
                  concentrer prochainement
                </li>
              </ol>
              <p className="text-sm text-muted mt-2">
                💡 <strong>Astuce</strong> : Ajoutez une émotion à chaque item pour mieux exprimer
                votre ressenti (fierté, joie, frustration, etc.)
              </p>
            </div>

            <div className="flex gap-3 pt-4">
              <Button
                type="button"
                variant="outline"
                onClick={() => router.back()}
                disabled={loading}
              >
                Annuler
              </Button>
              <Button type="submit" loading={loading} className="flex-1">
                Créer le check-in
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </main>
  );
}