"use client";

import { useState, useEffect } from "react";
import { ScreenDefinition } from "@/types/screen";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { 
  Database, 
  Monitor, 
  ArrowRight, 
  Link2, 
  Table, 
  Columns,
  ExternalLink,
  Layers,
  GitBranch
} from "lucide-react";
import { getFieldJoins, getDataFlows, getTableRelations, FieldJoin, DataFlow, TableRelation } from "@/lib/api/screenGroup";
import { screenApi } from "@/lib/api/screen";

interface ScreenRelationViewProps {
  screen: ScreenDefinition | null;
}

export function ScreenRelationView({ screen }: ScreenRelationViewProps) {
  const [loading, setLoading] = useState(false);
  const [fieldJoins, setFieldJoins] = useState<FieldJoin[]>([]);
  const [dataFlows, setDataFlows] = useState<DataFlow[]>([]);
  const [tableRelations, setTableRelations] = useState<TableRelation[]>([]);
  const [layoutInfo, setLayoutInfo] = useState<any>(null);

  useEffect(() => {
    const loadRelations = async () => {
      if (!screen) {
        setFieldJoins([]);
        setDataFlows([]);
        setTableRelations([]);
        setLayoutInfo(null);
        return;
      }

      try {
        setLoading(true);

        // 병렬로 데이터 로드
        const [joinsRes, flowsRes, relationsRes, layoutRes] = await Promise.all([
          getFieldJoins(screen.screenId),
          getDataFlows(screen.screenId),
          getTableRelations(screen.screenId),
          screenApi.getLayout(screen.screenId).catch(() => null),
        ]);

        if (joinsRes.success && joinsRes.data) {
          setFieldJoins(joinsRes.data);
        }
        if (flowsRes.success && flowsRes.data) {
          setDataFlows(flowsRes.data);
        }
        if (relationsRes.success && relationsRes.data) {
          setTableRelations(relationsRes.data);
        }
        if (layoutRes) {
          setLayoutInfo(layoutRes);
        }
      } catch (error) {
        console.error("관계 정보 로드 실패:", error);
      } finally {
        setLoading(false);
      }
    };

    loadRelations();
  }, [screen?.screenId]);

  if (!screen) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-center py-12">
        <Layers className="h-16 w-16 text-muted-foreground/30 mb-4" />
        <h3 className="text-lg font-medium text-muted-foreground mb-2">화면을 선택하세요</h3>
        <p className="text-sm text-muted-foreground/70">
          왼쪽 트리에서 화면을 선택하면 데이터 관계가 표시됩니다
        </p>
      </div>
    );
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center p-8">
        <div className="text-sm text-muted-foreground">로딩 중...</div>
      </div>
    );
  }

  // 컴포넌트에서 사용하는 테이블 분석
  const getUsedTables = () => {
    const tables = new Set<string>();
    if (screen.tableName) {
      tables.add(screen.tableName);
    }
    if (layoutInfo?.components) {
      layoutInfo.components.forEach((comp: any) => {
        if (comp.properties?.tableName) {
          tables.add(comp.properties.tableName);
        }
        if (comp.properties?.dataSource?.tableName) {
          tables.add(comp.properties.dataSource.tableName);
        }
      });
    }
    return Array.from(tables);
  };

  const usedTables = getUsedTables();

  return (
    <div className="p-4 space-y-4 overflow-auto h-full">
      {/* 화면 기본 정보 */}
      <div className="flex items-start gap-4">
        <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-blue-500/10">
          <Monitor className="h-6 w-6 text-blue-500" />
        </div>
        <div className="flex-1 min-w-0">
          <h3 className="font-semibold text-lg truncate">{screen.screenName}</h3>
          <div className="flex items-center gap-2 mt-1">
            <Badge variant="outline">{screen.screenCode}</Badge>
            <Badge variant="secondary">{screen.screenType}</Badge>
          </div>
          {screen.description && (
            <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
              {screen.description}
            </p>
          )}
        </div>
      </div>

      <Separator />

      {/* 연결된 테이블 */}
      <Card>
        <CardHeader className="py-3 px-4">
          <CardTitle className="text-sm font-medium flex items-center gap-2">
            <Database className="h-4 w-4 text-green-500" />
            연결된 테이블
          </CardTitle>
        </CardHeader>
        <CardContent className="px-4 pb-4 pt-0">
          {usedTables.length > 0 ? (
            <div className="space-y-2">
              {usedTables.map((tableName, index) => (
                <div
                  key={index}
                  className="flex items-center gap-2 p-2 rounded-md bg-muted/50"
                >
                  <Table className="h-4 w-4 text-muted-foreground" />
                  <span className="text-sm font-mono">{tableName}</span>
                  {tableName === screen.tableName && (
                    <Badge variant="default" className="text-xs ml-auto">
                      메인
                    </Badge>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground">연결된 테이블이 없습니다</p>
          )}
        </CardContent>
      </Card>

      {/* 필드 조인 관계 */}
      <Card>
        <CardHeader className="py-3 px-4">
          <CardTitle className="text-sm font-medium flex items-center gap-2">
            <Link2 className="h-4 w-4 text-purple-500" />
            필드 조인 관계
            {fieldJoins.length > 0 && (
              <Badge variant="secondary" className="ml-auto">{fieldJoins.length}</Badge>
            )}
          </CardTitle>
        </CardHeader>
        <CardContent className="px-4 pb-4 pt-0">
          {fieldJoins.length > 0 ? (
            <div className="space-y-2">
              {fieldJoins.map((join) => (
                <div
                  key={join.id}
                  className="flex items-center gap-2 p-2 rounded-md bg-muted/50 text-sm"
                >
                  <div className="flex items-center gap-1">
                    <span className="font-mono text-xs">{join.sourceTable}</span>
                    <span className="text-muted-foreground">.</span>
                    <span className="font-mono text-xs text-blue-600">{join.sourceColumn}</span>
                  </div>
                  <ArrowRight className="h-3 w-3 text-muted-foreground" />
                  <div className="flex items-center gap-1">
                    <span className="font-mono text-xs">{join.targetTable}</span>
                    <span className="text-muted-foreground">.</span>
                    <span className="font-mono text-xs text-green-600">{join.targetColumn}</span>
                  </div>
                  <Badge variant="outline" className="ml-auto text-xs">
                    {join.joinType}
                  </Badge>
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground">설정된 조인이 없습니다</p>
          )}
        </CardContent>
      </Card>

      {/* 데이터 흐름 */}
      <Card>
        <CardHeader className="py-3 px-4">
          <CardTitle className="text-sm font-medium flex items-center gap-2">
            <GitBranch className="h-4 w-4 text-orange-500" />
            데이터 흐름
            {dataFlows.length > 0 && (
              <Badge variant="secondary" className="ml-auto">{dataFlows.length}</Badge>
            )}
          </CardTitle>
        </CardHeader>
        <CardContent className="px-4 pb-4 pt-0">
          {dataFlows.length > 0 ? (
            <div className="space-y-2">
              {dataFlows.map((flow) => (
                <div
                  key={flow.id}
                  className="flex items-center gap-2 p-2 rounded-md bg-muted/50 text-sm"
                >
                  <Monitor className="h-4 w-4 text-blue-500" />
                  <span className="truncate">{flow.flowName || "이름 없음"}</span>
                  <ArrowRight className="h-3 w-3 text-muted-foreground" />
                  <Monitor className="h-4 w-4 text-green-500" />
                  <span className="text-muted-foreground truncate">
                    화면 #{flow.targetScreenId}
                  </span>
                  <Badge variant="outline" className="ml-auto text-xs">
                    {flow.flowType}
                  </Badge>
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground">설정된 데이터 흐름이 없습니다</p>
          )}
        </CardContent>
      </Card>

      {/* 테이블 관계 */}
      <Card>
        <CardHeader className="py-3 px-4">
          <CardTitle className="text-sm font-medium flex items-center gap-2">
            <Columns className="h-4 w-4 text-cyan-500" />
            테이블 관계
            {tableRelations.length > 0 && (
              <Badge variant="secondary" className="ml-auto">{tableRelations.length}</Badge>
            )}
          </CardTitle>
        </CardHeader>
        <CardContent className="px-4 pb-4 pt-0">
          {tableRelations.length > 0 ? (
            <div className="space-y-2">
              {tableRelations.map((relation) => (
                <div
                  key={relation.id}
                  className="flex items-center gap-2 p-2 rounded-md bg-muted/50 text-sm"
                >
                  <Table className="h-4 w-4 text-muted-foreground" />
                  <span className="font-mono text-xs">{relation.parentTable}</span>
                  <ArrowRight className="h-3 w-3 text-muted-foreground" />
                  <span className="font-mono text-xs">{relation.childTable}</span>
                  <Badge variant="outline" className="ml-auto text-xs">
                    {relation.relationType}
                  </Badge>
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground">설정된 테이블 관계가 없습니다</p>
          )}
        </CardContent>
      </Card>

      {/* 빠른 작업 */}
      <div className="pt-2 border-t">
        <p className="text-xs text-muted-foreground mb-2">
          더블클릭하면 화면 디자이너로 이동합니다
        </p>
      </div>
    </div>
  );
}