'use client';

import { useState, useMemo, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { Wrench, Plus, Pencil, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { TableCell, TableRow } from '@/components/ui/table';
import { Checkbox } from '@/components/ui/checkbox';
import { Badge } from '@/components/ui/badge';
import { IntegratedListTemplateV2, TabOption, TableColumn } from '@/components/templates/IntegratedListTemplateV2';
import { MobileCard } from '@/components/molecules/MobileCard';
import type { Process, ProcessStatus } from '@/types/process';

// Mock 데이터
const mockProcesses: Process[] = [
  {
    id: '1',
    processCode: 'P-004',
    processName: '재고(포밍)',
    description: '철판을 포밍하여 절곡 부품(반제품) 생산 후 재고 입고',
    processType: '생산',
    department: '포밍생산부서',
    workLogTemplate: '재고생산 작업일지',
    classificationRules: [],
    requiredWorkers: 2,
    workSteps: ['포밍', '검사', '포장'],
    status: '사용중',
    createdAt: '2025-01-01',
    updatedAt: '2025-01-15',
  },
  {
    id: '2',
    processCode: 'P-003',
    processName: '슬랫',
    description: '슬랫 코일 절단 및 성형',
    processType: '생산',
    department: '슬랫생산부서',
    classificationRules: [],
    requiredWorkers: 3,
    workSteps: ['절단', '성형', '검사'],
    status: '사용중',
    createdAt: '2025-01-01',
    updatedAt: '2025-01-10',
  },
  {
    id: '3',
    processCode: 'P-002',
    processName: '절곡',
    description: '가이드레일, 케이스, 하단마감재 제작',
    processType: '생산',
    department: '절곡생산부서',
    classificationRules: [],
    requiredWorkers: 4,
    workSteps: ['절단', '절곡', '용접', '검사'],
    status: '사용중',
    createdAt: '2025-01-01',
    updatedAt: '2025-01-08',
  },
  {
    id: '4',
    processCode: 'P-001',
    processName: '스크린',
    description: '방화스크린 원단 가공 및 조립',
    processType: '생산',
    department: '스크린생산부서',
    classificationRules: [],
    requiredWorkers: 3,
    workSteps: ['원단가공', '조립', '검사', '포장'],
    status: '사용중',
    createdAt: '2025-01-01',
    updatedAt: '2025-01-05',
  },
];

// 테이블 컬럼 정의
const tableColumns: TableColumn[] = [
  { key: 'no', label: '번호', className: 'w-[60px] text-center' },
  { key: 'processCode', label: '공정코드', className: 'w-[100px]' },
  { key: 'processName', label: '공정명', className: 'min-w-[250px]' },
  { key: 'processType', label: '구분', className: 'w-[80px] text-center' },
  { key: 'department', label: '담당부서', className: 'w-[120px]' },
  { key: 'classificationRules', label: '분류규칙', className: 'w-[80px] text-center' },
  { key: 'requiredWorkers', label: '인원', className: 'w-[60px] text-center' },
  { key: 'status', label: '상태', className: 'w-[80px] text-center' },
  { key: 'actions', label: '작업', className: 'w-[100px] text-center' },
];

// 탭 옵션 계산
function getTabOptions(processes: Process[]): TabOption[] {
  const total = processes.length;
  const active = processes.filter(p => p.status === '사용중').length;
  const inactive = processes.filter(p => p.status === '미사용').length;

  return [
    { value: 'all', label: '전체', count: total },
    { value: '사용중', label: '사용중', count: active },
    { value: '미사용', label: '미사용', count: inactive },
  ];
}

export default function ProcessListClient() {
  const router = useRouter();

  // 상태
  const [processes] = useState<Process[]>(mockProcesses);
  const [activeTab, setActiveTab] = useState('all');
  const [searchValue, setSearchValue] = useState('');
  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 20;

  // 필터링된 데이터
  const filteredProcesses = useMemo(() => {
    return processes.filter(process => {
      // 탭 필터
      if (activeTab !== 'all' && process.status !== activeTab) {
        return false;
      }
      // 검색 필터
      if (searchValue) {
        const search = searchValue.toLowerCase();
        return (
          process.processCode.toLowerCase().includes(search) ||
          process.processName.toLowerCase().includes(search) ||
          process.department.toLowerCase().includes(search)
        );
      }
      return true;
    });
  }, [processes, activeTab, searchValue]);

  // 페이지네이션
  const totalPages = Math.ceil(filteredProcesses.length / itemsPerPage);
  const paginatedData = useMemo(() => {
    const start = (currentPage - 1) * itemsPerPage;
    return filteredProcesses.slice(start, start + itemsPerPage);
  }, [filteredProcesses, currentPage, itemsPerPage]);

  // 탭 옵션
  const tabOptions = useMemo(() => getTabOptions(processes), [processes]);

  // 핸들러
  const handleTabChange = useCallback((value: string) => {
    setActiveTab(value);
    setCurrentPage(1);
  }, []);

  const handleSearchChange = useCallback((value: string) => {
    setSearchValue(value);
    setCurrentPage(1);
  }, []);

  const handleToggleSelection = useCallback((id: string) => {
    setSelectedItems(prev => {
      const newSet = new Set(prev);
      if (newSet.has(id)) {
        newSet.delete(id);
      } else {
        newSet.add(id);
      }
      return newSet;
    });
  }, []);

  const handleToggleSelectAll = useCallback(() => {
    if (selectedItems.size === paginatedData.length) {
      setSelectedItems(new Set());
    } else {
      setSelectedItems(new Set(paginatedData.map(p => p.id)));
    }
  }, [selectedItems.size, paginatedData]);

  const handleRowClick = useCallback((process: Process) => {
    router.push(`/ko/master-data/process-management/${process.id}`);
  }, [router]);

  const handleCreate = useCallback(() => {
    router.push('/ko/master-data/process-management/new');
  }, [router]);

  const handleEdit = useCallback((e: React.MouseEvent, processId: string) => {
    e.stopPropagation();
    router.push(`/ko/master-data/process-management/${processId}/edit`);
  }, [router]);

  const handleDelete = useCallback((e: React.MouseEvent, processId: string) => {
    e.stopPropagation();
    // TODO: 삭제 확인 모달 및 API 연동
    console.log('Delete process:', processId);
  }, []);

  // 테이블 행 렌더링
  const renderTableRow = useCallback((process: Process, index: number, globalIndex: number) => {
    const isSelected = selectedItems.has(process.id);

    return (
      <TableRow
        key={process.id}
        className="cursor-pointer hover:bg-muted/50"
        onClick={() => handleRowClick(process)}
      >
        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
          <Checkbox
            checked={isSelected}
            onCheckedChange={() => handleToggleSelection(process.id)}
          />
        </TableCell>
        <TableCell className="text-center text-muted-foreground">{globalIndex}</TableCell>
        <TableCell className="font-medium">{process.processCode}</TableCell>
        <TableCell>
          <div>
            <div className="font-medium">{process.processName}</div>
            {process.description && (
              <div className="text-sm text-muted-foreground">{process.description}</div>
            )}
          </div>
        </TableCell>
        <TableCell className="text-center">
          <Badge variant="secondary">{process.processType}</Badge>
        </TableCell>
        <TableCell>{process.department}</TableCell>
        <TableCell className="text-center">
          {process.classificationRules.length > 0 ? (
            <Badge variant="outline">{process.classificationRules.length}</Badge>
          ) : (
            <span className="text-muted-foreground">-</span>
          )}
        </TableCell>
        <TableCell className="text-center">{process.requiredWorkers}명</TableCell>
        <TableCell className="text-center">
          <Badge variant={process.status === '사용중' ? 'default' : 'secondary'}>
            {process.status}
          </Badge>
        </TableCell>
        <TableCell className="text-center">
          {isSelected && (
            <div className="flex items-center justify-center gap-2">
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8"
                onClick={(e) => handleEdit(e, process.id)}
              >
                <Pencil className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 text-destructive hover:text-destructive"
                onClick={(e) => handleDelete(e, process.id)}
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          )}
        </TableCell>
      </TableRow>
    );
  }, [selectedItems, handleToggleSelection, handleRowClick, handleEdit, handleDelete]);

  // 모바일 카드 렌더링
  const renderMobileCard = useCallback((
    process: Process,
    index: number,
    globalIndex: number,
    isSelected: boolean,
    onToggle: () => void
  ) => {
    return (
      <MobileCard
        title={process.processName}
        subtitle={process.processCode}
        description={process.description}
        badge={process.status}
        badgeVariant={process.status === '사용중' ? 'default' : 'secondary'}
        isSelected={isSelected}
        onToggle={onToggle}
        onClick={() => handleRowClick(process)}
        details={[
          { label: '구분', value: process.processType },
          { label: '담당부서', value: process.department },
          { label: '인원', value: `${process.requiredWorkers}명` },
        ]}
      />
    );
  }, [handleRowClick]);

  return (
    <IntegratedListTemplateV2
      title="공정 목록"
      icon={Wrench}
      headerActions={
        <div className="flex justify-end w-full">
          <Button onClick={handleCreate} className="gap-2">
            <Plus className="h-4 w-4" />
            공정 등록
          </Button>
        </div>
      }
      searchValue={searchValue}
      onSearchChange={handleSearchChange}
      searchPlaceholder="공정코드, 공정명, 담당부서 검색"
      tabs={tabOptions}
      activeTab={activeTab}
      onTabChange={handleTabChange}
      tableColumns={tableColumns}
      data={paginatedData}
      allData={filteredProcesses}
      selectedItems={selectedItems}
      onToggleSelection={handleToggleSelection}
      onToggleSelectAll={handleToggleSelectAll}
      getItemId={(item) => item.id}
      renderTableRow={renderTableRow}
      renderMobileCard={renderMobileCard}
      pagination={{
        currentPage,
        totalPages,
        totalItems: filteredProcesses.length,
        itemsPerPage,
        onPageChange: setCurrentPage,
      }}
    />
  );
}