"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ArrowLeft, Save, Loader2 } from "lucide-react";
import { screenApi } from "@/lib/api/screen";
import { ScreenDefinition, LayoutData } from "@/types/screen";
import { InteractiveScreenViewer } from "@/components/screen/InteractiveScreenViewer";
import { useRouter } from "next/navigation";
import { toast } from "sonner";

export default function ScreenViewPage() {
  const params = useParams();
  const router = useRouter();
  const screenId = parseInt(params.screenId as string);

  const [screen, setScreen] = useState<ScreenDefinition | null>(null);
  const [layout, setLayout] = useState<LayoutData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [formData, setFormData] = useState<Record<string, any>>({});

  useEffect(() => {
    const loadScreen = async () => {
      try {
        setLoading(true);
        setError(null);

        // 화면 정보 로드
        const screenData = await screenApi.getScreen(screenId);
        setScreen(screenData);

        // 레이아웃 로드
        try {
          const layoutData = await screenApi.getLayout(screenId);
          setLayout(layoutData);
        } catch (layoutError) {
          console.warn("레이아웃 로드 실패, 빈 레이아웃 사용:", layoutError);
          setLayout({
            components: [],
            gridSettings: { columns: 12, gap: 16, padding: 16 },
          });
        }
      } catch (error) {
        console.error("화면 로드 실패:", error);
        setError("화면을 불러오는데 실패했습니다.");
        toast.error("화면을 불러오는데 실패했습니다.");
      } finally {
        setLoading(false);
      }
    };

    if (screenId) {
      loadScreen();
    }
  }, [screenId]);

  // 폼 데이터 저장 함수
  const handleSaveData = async () => {
    if (!screen) return;

    try {
      setSaving(true);
      console.log("저장할 데이터:", formData);
      console.log("화면 정보:", screen);

      // 여기에 실제 데이터 저장 API 호출을 추가할 수 있습니다
      // await saveFormData(screen.tableName, formData);

      toast.success("데이터가 성공적으로 저장되었습니다.");
    } catch (error) {
      console.error("데이터 저장 실패:", error);
      toast.error("데이터 저장에 실패했습니다.");
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-center">
          <Loader2 className="mx-auto h-8 w-8 animate-spin text-blue-600" />
          <p className="mt-2 text-gray-600">화면을 불러오는 중...</p>
        </div>
      </div>
    );
  }

  if (error || !screen) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-center">
          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100">
            <span className="text-2xl">⚠️</span>
          </div>
          <h2 className="mb-2 text-xl font-semibold text-gray-900">화면을 찾을 수 없습니다</h2>
          <p className="mb-4 text-gray-600">{error || "요청하신 화면이 존재하지 않습니다."}</p>
          <Button onClick={() => router.back()} variant="outline">
            <ArrowLeft className="mr-2 h-4 w-4" />
            이전으로 돌아가기
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-full w-full flex-col">
      {/* 헤더 */}
      <div className="flex items-center justify-between border-b bg-white p-4 shadow-sm">
        <div className="flex items-center space-x-4">
          <Button variant="outline" size="sm" onClick={() => router.back()}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            이전
          </Button>
          <div>
            <h1 className="text-xl font-semibold text-gray-900">{screen.screenName}</h1>
            <div className="mt-1 flex items-center space-x-2">
              <Badge variant="outline" className="font-mono text-xs">
                {screen.screenCode}
              </Badge>
              <Badge variant="secondary" className="text-xs">
                {screen.tableName}
              </Badge>
              <Badge variant={screen.isActive === "Y" ? "default" : "secondary"} className="text-xs">
                {screen.isActive === "Y" ? "활성" : "비활성"}
              </Badge>
            </div>
          </div>
        </div>
        <div className="flex items-center space-x-2">
          <span className="text-sm text-gray-500">생성일: {screen.createdDate.toLocaleDateString()}</span>
        </div>
      </div>

      {/* 메인 컨텐츠 영역 */}
      <div className="flex-1 overflow-hidden">
        {layout && layout.components.length > 0 ? (
          <div className="h-full p-6">
            <Card className="h-full">
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  <span>{screen.screenName}</span>
                  <Button
                    size="sm"
                    className="bg-blue-600 hover:bg-blue-700"
                    onClick={handleSaveData}
                    disabled={saving}
                  >
                    {saving ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        저장 중...
                      </>
                    ) : (
                      <>
                        <Save className="mr-2 h-4 w-4" />
                        저장
                      </>
                    )}
                  </Button>
                </CardTitle>
                {screen.description && <p className="text-sm text-gray-600">{screen.description}</p>}
              </CardHeader>
              <CardContent className="h-[calc(100%-5rem)] overflow-auto">
                {/* 실제 화면 렌더링 영역 */}
                <div className="relative h-full w-full bg-white">
                  {layout.components
                    .filter((comp) => !comp.parentId) // 최상위 컴포넌트만 렌더링 (그룹 포함)
                    .map((component) => {
                      // 그룹 컴포넌트인 경우 특별 처리
                      if (component.type === "group") {
                        const groupChildren = layout.components.filter((child) => child.parentId === component.id);

                        return (
                          <div
                            key={component.id}
                            style={{
                              position: "absolute",
                              left: `${component.position.x}px`,
                              top: `${component.position.y}px`,
                              width: `${component.size.width}px`,
                              height: `${component.size.height}px`,
                              zIndex: component.position.z || 1,
                              backgroundColor: (component as any).backgroundColor || "rgba(59, 130, 246, 0.1)",
                              border: (component as any).border || "2px dashed #3b82f6",
                              borderRadius: (component as any).borderRadius || "8px",
                              padding: "16px",
                            }}
                          >
                            {/* 그룹 제목 */}
                            {(component as any).title && (
                              <div className="mb-2 text-sm font-medium text-blue-700">{(component as any).title}</div>
                            )}

                            {/* 그룹 내 자식 컴포넌트들 렌더링 */}
                            {groupChildren.map((child) => (
                              <div
                                key={child.id}
                                style={{
                                  position: "absolute",
                                  left: `${child.position.x}px`,
                                  top: `${child.position.y}px`,
                                  width: `${child.size.width}px`,
                                  height: `${child.size.height}px`,
                                  zIndex: child.position.z || 1,
                                }}
                              >
                                <InteractiveScreenViewer
                                  component={child}
                                  allComponents={layout.components}
                                  formData={formData}
                                  onFormDataChange={(fieldName, value) => {
                                    setFormData((prev) => ({
                                      ...prev,
                                      [fieldName]: value,
                                    }));
                                  }}
                                />
                              </div>
                            ))}
                          </div>
                        );
                      }

                      // 일반 컴포넌트 렌더링
                      return (
                        <div
                          key={component.id}
                          style={{
                            position: "absolute",
                            left: `${component.position.x}px`,
                            top: `${component.position.y}px`,
                            width: `${component.size.width}px`,
                            height: `${component.size.height}px`,
                            zIndex: component.position.z || 1,
                          }}
                        >
                          <InteractiveScreenViewer
                            component={component}
                            allComponents={layout.components}
                            formData={formData}
                            onFormDataChange={(fieldName, value) => {
                              setFormData((prev) => ({
                                ...prev,
                                [fieldName]: value,
                              }));
                            }}
                          />
                        </div>
                      );
                    })}
                </div>
              </CardContent>
            </Card>
          </div>
        ) : (
          <div className="flex h-full items-center justify-center">
            <div className="text-center">
              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-100">
                <span className="text-2xl">📄</span>
              </div>
              <h2 className="mb-2 text-xl font-semibold text-gray-900">화면이 비어있습니다</h2>
              <p className="text-gray-600">이 화면에는 아직 설계된 컴포넌트가 없습니다.</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}