'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { SearchX, Home, ArrowLeft, Map, AlertCircle, ServerCrash } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

type ErrorType = 'not-found' | 'network' | 'error';

interface ErrorCardProps {
  type?: ErrorType;
  title?: string;
  description?: string;
  /** description의 별칭 */
  message?: string;
  tips?: string[];
  showBackButton?: boolean;
  showHomeButton?: boolean;
  backButtonLabel?: string;
  homeButtonLabel?: string;
  homeButtonHref?: string;
  onBack?: () => void;
  /** 커스텀 액션 버튼 라벨 */
  actionLabel?: string;
  /** 커스텀 액션 버튼 클릭 핸들러 */
  onAction?: () => void;
}

const ERROR_CONFIG: Record<ErrorType, {
  icon: typeof SearchX;
  iconColor: string;
  bgColor: string;
  emoji: string;
  defaultTitle: string;
  defaultDescription: string;
  defaultTips: string[];
}> = {
  'not-found': {
    icon: SearchX,
    iconColor: 'text-yellow-600 dark:text-yellow-500',
    bgColor: 'from-yellow-500/20 to-orange-500/20',
    emoji: '?',
    defaultTitle: '페이지를 찾을 수 없습니다',
    defaultDescription: '요청하신 페이지가 존재하지 않거나 접근 권한이 없습니다.',
    defaultTips: [
      '메뉴에서 올바른 페이지를 선택했는지 확인',
      '해당 페이지에 접근 권한이 있는지 확인',
      '페이지가 아직 개발 중일 수 있습니다',
    ],
  },
  'network': {
    icon: ServerCrash,
    iconColor: 'text-orange-600 dark:text-orange-500',
    bgColor: 'from-orange-500/20 to-red-500/20',
    emoji: '!',
    defaultTitle: '데이터를 불러올 수 없습니다',
    defaultDescription: '서버와의 연결에 문제가 발생했습니다.',
    defaultTips: [
      '인터넷 연결 상태를 확인해주세요',
      '잠시 후 다시 시도해주세요',
      '문제가 지속되면 관리자에게 문의해주세요',
    ],
  },
  'error': {
    icon: AlertCircle,
    iconColor: 'text-red-600 dark:text-red-500',
    bgColor: 'from-red-500/20 to-pink-500/20',
    emoji: '!',
    defaultTitle: '오류가 발생했습니다',
    defaultDescription: '요청을 처리하는 중 문제가 발생했습니다.',
    defaultTips: [
      '페이지를 새로고침 해보세요',
      '잠시 후 다시 시도해주세요',
      '문제가 지속되면 관리자에게 문의해주세요',
    ],
  },
};

export function ErrorCard({
  type = 'not-found',
  title,
  description,
  message,
  tips,
  showBackButton = true,
  showHomeButton = true,
  backButtonLabel = '이전 페이지',
  homeButtonLabel = '목록으로 이동',
  homeButtonHref,
  onBack,
  actionLabel,
  onAction,
}: ErrorCardProps) {
  const router = useRouter();
  const config = ERROR_CONFIG[type];
  const Icon = config.icon;

  const handleBack = () => {
    if (onBack) {
      onBack();
    } else {
      router.back();
    }
  };

  return (
    <div className="flex items-center justify-center min-h-[calc(100vh-200px)] 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 ${config.bgColor} rounded-2xl flex items-center justify-center`}>
                <Icon className={`w-12 h-12 ${config.iconColor}`} strokeWidth={1.5} />
              </div>
              <div className="absolute -top-1 -right-1 w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center shadow-lg">
                <span className="text-xl font-bold text-white">{config.emoji}</span>
              </div>
            </div>
          </div>
          <CardTitle className="text-2xl md:text-3xl font-bold text-foreground mb-2">
            {title || config.defaultTitle}
          </CardTitle>
          <p className="text-muted-foreground">
            {description || message || config.defaultDescription}
          </p>
        </CardHeader>

        <CardContent className="space-y-6">
          {/* 안내 메시지 */}
          <div className="bg-muted/50 rounded-xl p-6 space-y-3">
            <div className="flex items-start gap-3">
              <Map className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
              <div className="space-y-2">
                <p className="text-sm text-foreground font-medium">
                  다음을 확인해주세요:
                </p>
                <ul className="text-sm text-muted-foreground space-y-1 list-disc list-inside">
                  {(tips || config.defaultTips).map((tip, index) => (
                    <li key={index}>{tip}</li>
                  ))}
                </ul>
              </div>
            </div>
          </div>

          {/* 액션 버튼 */}
          <div className="flex flex-col sm:flex-row gap-3 pt-4">
            {actionLabel && onAction ? (
              <Button
                className="flex-1 rounded-xl"
                onClick={onAction}
              >
                <ArrowLeft className="w-4 h-4 mr-2" />
                {actionLabel}
              </Button>
            ) : (
              <>
                {showBackButton && (
                  <Button
                    variant="outline"
                    className="flex-1 rounded-xl"
                    onClick={handleBack}
                  >
                    <ArrowLeft className="w-4 h-4 mr-2" />
                    {backButtonLabel}
                  </Button>
                )}

                {showHomeButton && homeButtonHref && (
                  <Button
                    asChild
                    className="flex-1 rounded-xl bg-primary hover:bg-primary/90"
                  >
                    <Link href={homeButtonHref}>
                      <Home className="w-4 h-4 mr-2" />
                      {homeButtonLabel}
                    </Link>
                  </Button>
                )}
              </>
            )}
          </div>

          {/* 도움말 */}
          <div className="pt-6 border-t border-border/20 text-center">
            <p className="text-xs text-muted-foreground">
              좌측 메뉴에서 이용 가능한 페이지를 확인하실 수 있습니다.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
