'use client';

import { usePathname } from 'next/navigation';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import {
  ServerCrash,
  RefreshCw,
  Home,
  ArrowLeft,
  MessageCircleQuestion,
} from 'lucide-react';
import { useRouter } from 'next/navigation';

interface ServerErrorPageProps {
  title?: string;
  message?: string;
  errorCode?: string | number;
  onRetry?: () => void;
  showBackButton?: boolean;
  showHomeButton?: boolean;
  showContactInfo?: boolean;
  contactEmail?: string;
}

export function ServerErrorPage({
  title = '서버 오류가 발생했습니다',
  message = '일시적인 문제가 발생했습니다. 잠시 후 다시 시도해 주세요.',
  errorCode,
  onRetry,
  showBackButton = true,
  showHomeButton = true,
  showContactInfo = true,
  contactEmail = 'admin@company.com',
}: ServerErrorPageProps) {
  const router = useRouter();
  const pathname = usePathname();

  const handleRetry = () => {
    if (onRetry) {
      onRetry();
    } else {
      window.location.reload();
    }
  };

  return (
    <div className="min-h-[calc(100vh-200px)] flex items-center justify-center p-4">
      <Card className="w-full max-w-2xl border border-border/20 bg-card/50 backdrop-blur">
        <CardHeader className="text-center pb-4">
          <div className="flex justify-center mb-6">
            <div className="relative">
              <div className="w-24 h-24 bg-gradient-to-br from-red-500/20 to-orange-500/10 rounded-2xl flex items-center justify-center">
                <ServerCrash className="w-12 h-12 text-red-500" />
              </div>
              <div className="absolute -top-1 -right-1 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center">
                <span className="text-xs text-white font-bold">!</span>
              </div>
            </div>
          </div>
          <CardTitle className="text-2xl md:text-3xl font-bold text-foreground mb-2">
            {title}
          </CardTitle>
          {errorCode && (
            <p className="text-muted-foreground text-sm md:text-base">
              오류 코드: <code className="bg-muted px-2 py-1 rounded text-xs">{errorCode}</code>
            </p>
          )}
        </CardHeader>

        <CardContent className="text-center space-y-6">
          <div className="bg-red-50 dark:bg-red-950/30 rounded-xl p-6 space-y-3 border border-red-200 dark:border-red-900/50">
            <p className="text-lg text-foreground font-medium">
              {message}
            </p>
            <p className="text-sm text-muted-foreground">
              문제가 지속되면 관리자에게 문의해 주세요.
            </p>
          </div>

          <div className="flex flex-col sm:flex-row gap-3 justify-center pt-4">
            <Button
              variant="default"
              onClick={handleRetry}
              className="rounded-xl bg-red-500 hover:bg-red-600"
            >
              <RefreshCw className="w-4 h-4 mr-2" />
              다시 시도
            </Button>

            {showBackButton && (
              <Button
                variant="outline"
                onClick={() => router.back()}
                className="rounded-xl"
              >
                <ArrowLeft className="w-4 h-4 mr-2" />
                이전 페이지
              </Button>
            )}

            {showHomeButton && (
              <Button
                variant="outline"
                onClick={() => router.push('/dashboard')}
                className="rounded-xl"
              >
                <Home className="w-4 h-4 mr-2" />
                대시보드로 이동
              </Button>
            )}
          </div>

          {showContactInfo && (
            <div className="pt-6 border-t border-border/20">
              <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
                <MessageCircleQuestion className="w-4 h-4" />
                <span>
                  문제가 계속되면{' '}
                  <a
                    href={`mailto:${contactEmail}`}
                    className="text-primary hover:underline font-medium"
                  >
                    관리자에게 문의
                  </a>
                  해 주세요.
                </span>
              </div>
              {pathname && (
                <p className="text-xs text-muted-foreground mt-2">
                  발생 위치: <code className="bg-muted px-1.5 py-0.5 rounded">{pathname}</code>
                </p>
              )}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}