'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { useMutation } from '@tanstack/react-query';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Separator } from '@/components/ui/separator';
import { LogIn, Shield, Zap, ArrowLeft, Activity, CalendarCheck } from 'lucide-react';

interface AuthResponse {
  success?: boolean;
  token?: string;
  userId?: string;
  error?: string;
}

export default function Welcome() {
  const router = useRouter();
  const [showTokenInput, setShowTokenInput] = useState(false);
  const [tokenInput, setTokenInput] = useState('');
  const [error, setError] = useState('');

  const createAccountMutation = useMutation({
    mutationFn: async (): Promise<AuthResponse> => {
      const res = await fetch('/api/auth', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'create' }),
      });
      if (!res.ok) throw new Error('Failed to create account');
      return res.json() as Promise<AuthResponse>;
    },
    onSuccess: () => {
      router.push('/dashboard');
    },
    onError: () => {
      setError('Failed to create account. Please try again.');
    },
  });

  const loginMutation = useMutation({
    mutationFn: async (token: string): Promise<AuthResponse> => {
      const res = await fetch('/api/auth', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'login', token }),
      });
      if (!res.ok) {
        const data = (await res.json()) as AuthResponse;
        throw new Error(data.error ?? 'Failed to login');
      }
      return res.json() as Promise<AuthResponse>;
    },
    onSuccess: () => {
      router.push('/dashboard');
    },
    onError: (error: Error) => {
      setError(error.message || 'Failed to login. Please check your token.');
    },
  });

  const handleTokenLogin = () => {
    if (tokenInput.trim()) {
      setError('');
      loginMutation.mutate(tokenInput.trim());
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleTokenLogin();
    }
  };

  return (
    <Card className="w-full max-w-md border-zinc-800 bg-zinc-950">
      <CardHeader className="space-y-2 text-center">
        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-950">
          <span className="text-3xl">📅</span>
        </div>
        <CardTitle className="text-3xl font-bold">Track Every Day</CardTitle>
        <CardDescription className="text-base">
          Build better habits, one day at a time. No email or password required.
        </CardDescription>
      </CardHeader>
      <CardContent>
        {!showTokenInput ? (
          <div className="space-y-6">
            {/* Features */}
            <div className="grid gap-3 text-sm">
              <div className="flex items-center gap-3">
                <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-emerald-950">
                  <Shield className="h-4 w-4 text-emerald-500" />
                </div>
                <p className="text-zinc-400">Privacy-first: No personal data required</p>
              </div>
              <div className="flex items-center gap-3">
                <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-emerald-950">
                  <Zap className="h-4 w-4 text-emerald-500" />
                </div>
                <p className="text-zinc-400">Instant access with a unique token</p>
              </div>
              <div className="flex items-center gap-3">
                <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-emerald-950">
                  <Activity className="h-4 w-4 text-emerald-500" />
                </div>
                <p className="text-zinc-400">Track positive, neutral, or negative habits</p>
              </div>
            </div>

            <Separator className="bg-zinc-800" />

            {/* Actions */}
            <div className="space-y-3">
              <Button
                onClick={() => {
                  createAccountMutation.mutate();
                }}
                disabled={createAccountMutation.isPending}
                className="w-full bg-emerald-600 text-white hover:bg-emerald-700"
                size="lg"
              >
                {createAccountMutation.isPending ? (
                  <>Creating your account...</>
                ) : (
                  <>
                    <CalendarCheck className="mr-2 h-4 w-4" />
                    Start Tracking Now
                  </>
                )}
              </Button>

              <div className="relative">
                <div className="absolute inset-0 flex items-center">
                  <Separator className="w-full bg-zinc-800" />
                </div>
                <div className="relative flex justify-center text-xs uppercase">
                  <span className="bg-zinc-950 px-2 text-zinc-500">or</span>
                </div>
              </div>

              <Button
                variant="outline"
                onClick={() => {
                  setShowTokenInput(true);
                }}
                className="w-full border-zinc-800 hover:bg-zinc-900"
                size="lg"
              >
                <LogIn className="mr-2 h-4 w-4" />I Have a Token
              </Button>
            </div>
          </div>
        ) : (
          <div className="space-y-4">
            <Button
              variant="ghost"
              onClick={() => {
                setShowTokenInput(false);
                setTokenInput('');
                setError('');
              }}
              className="mb-2 -ml-2 text-zinc-500 hover:text-white"
              size="sm"
            >
              <ArrowLeft className="mr-1 h-4 w-4" />
              Back
            </Button>

            <div className="space-y-2">
              <Label htmlFor="token">Access Token</Label>
              <Input
                id="token"
                type="text"
                placeholder="e.g., happy-blue-cat-1234"
                value={tokenInput}
                onChange={(e) => {
                  setTokenInput(e.target.value);
                }}
                onKeyDown={handleKeyDown}
                className="border-zinc-800 bg-zinc-900 placeholder:text-zinc-600"
                autoFocus
              />
              <p className="text-xs text-zinc-500">
                Enter the token you saved from your previous session
              </p>
            </div>

            <Button
              onClick={handleTokenLogin}
              disabled={loginMutation.isPending || !tokenInput.trim()}
              className="w-full bg-emerald-600 hover:bg-emerald-700"
              size="lg"
            >
              {loginMutation.isPending ? 'Logging in...' : 'Access My Habits'}
            </Button>
          </div>
        )}

        {error && (
          <Alert className="mt-4 border-red-900 bg-red-950">
            <AlertDescription className="text-sm text-red-400">{error}</AlertDescription>
          </Alert>
        )}

        <div className="mt-6 border-t border-zinc-800 pt-6">
          <p className="text-center text-xs text-zinc-500">
            Your habits are tied to a unique token. Save it to access your data across devices. No
            account creation or personal information required.
          </p>
        </div>
      </CardContent>
    </Card>
  );
}