'use client';

import { useOrderStore } from '@/stores/order';
import { Button } from '@repo/ui/components/ui/button';
import { Card, CardContent } from '@repo/ui/components/ui/card';
import { AlertCircle, CheckCircle2, Home, RefreshCw } from 'lucide-react';
import Link from 'next/link';

export function ErrorPage() {
  const setStep = useOrderStore((store) => store.setStep);

  const handleRetry = () => {
    setStep('datetime-select');
  };

  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-4">
      <Card className="w-full max-w-sm border-none bg-card text-card-foreground shadow-none">
        <CardContent className="flex flex-col items-center space-y-5 py-8">
          <div className="rounded-full bg-red-100 p-3 dark:bg-red-900">
            <AlertCircle className="size-12 text-red-600 dark:text-red-400" />
          </div>
          <div className="space-y-2 text-center">
            <h1 className="text-2xl font-bold">Ошибка!</h1>
            <p className="text-muted-foreground">Произошла ошибка при выполнении операции.</p>
          </div>
          <Button className="w-full" onClick={handleRetry} variant="destructive">
            <RefreshCw className="mr-2 size-4" />
            Повторить
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}

export function SuccessPage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-4">
      <Card className="w-full max-w-sm border-none bg-card text-card-foreground shadow-none">
        <CardContent className="flex flex-col items-center space-y-5 py-8">
          <div className="rounded-full bg-green-100 p-3 dark:bg-green-900">
            <CheckCircle2 className="size-12 text-green-600 dark:text-green-400" />
          </div>
          <div className="space-y-2 text-center">
            <h1 className="text-2xl font-bold">Готово!</h1>
            <p className="text-muted-foreground">Запись успешно создана</p>
          </div>
          <Button asChild className="w-full">
            <Link href="/">
              <Home className="mr-2 size-4" />
              На главный экран
            </Link>
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}