import { Card, CardContent } from "./ui/card";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Button } from "./ui/button";
import { Checkbox } from "./ui/checkbox";
import { Badge } from "./ui/badge";
import { Trash2 } from "lucide-react";
import { BendingDetail } from "./contexts/DataContext";

interface BendingDetailCardsProps {
  bendingDetails: BendingDetail[];
  onChange: (bendingDetails: BendingDetail[]) => void;
}

export function BendingDetailCards({ bendingDetails, onChange }: BendingDetailCardsProps) {
  const handleFieldChange = (id: string, field: keyof BendingDetail, value: any) => {
    const updated = bendingDetails.map(d => 
      d.id === id ? { ...d, [field]: value } : d
    );
    onChange(updated);
  };

  const handleDelete = (id: string) => {
    onChange(bendingDetails.filter(d => d.id !== id));
  };

  return (
    <>
      {/* 데스크톱 테이블 뷰 */}
      <div className="hidden lg:block overflow-x-auto bg-white rounded border">
        <table className="w-full text-sm">
          <thead className="bg-gray-100">
            <tr>
              <th className="border px-2 py-1">번호</th>
              <th className="border px-2 py-1">입력</th>
              <th className="border px-2 py-1">연신율</th>
              <th className="border px-2 py-1">연신율계산후</th>
              <th className="border px-2 py-1">합계</th>
              <th className="border px-2 py-1">음영</th>
              <th className="border px-2 py-1">A각</th>
              <th className="border px-2 py-1 w-16">삭제</th>
            </tr>
          </thead>
          <tbody>
            {bendingDetails.map((detail, detailIndex) => {
              const calculated = detail.input + detail.elongation;
              let sum = 0;
              for (let i = 0; i <= detailIndex; i++) {
                const d = bendingDetails[i];
                sum += d.input + d.elongation;
              }
              
              return (
                <tr key={detail.id} className={detail.shaded ? "bg-gray-200" : ""}>
                  <td className="border px-2 py-1 text-center">{detail.no}</td>
                  <td className="border px-2 py-1">
                    <Input
                      type="number"
                      value={detail.input}
                      onChange={(e) => handleFieldChange(detail.id, 'input', Number(e.target.value))}
                      className="w-20 h-7 text-center"
                    />
                  </td>
                  <td className="border px-2 py-1">
                    <Input
                      type="number"
                      value={detail.elongation}
                      onChange={(e) => handleFieldChange(detail.id, 'elongation', Number(e.target.value))}
                      className="w-20 h-7 text-center"
                    />
                  </td>
                  <td className="border px-2 py-1 text-center bg-blue-50">
                    {calculated}
                  </td>
                  <td className="border px-2 py-1 text-center bg-green-50 font-medium">
                    {sum}
                  </td>
                  <td className="border px-2 py-1 text-center">
                    <Checkbox
                      checked={detail.shaded}
                      onCheckedChange={(checked) => handleFieldChange(detail.id, 'shaded', checked as boolean)}
                    />
                  </td>
                  <td className="border px-2 py-1">
                    <Input
                      type="number"
                      value={detail.aAngle || ""}
                      onChange={(e) => handleFieldChange(detail.id, 'aAngle', e.target.value ? Number(e.target.value) : undefined)}
                      placeholder="각도"
                      className="w-16 h-7 text-center"
                    />
                  </td>
                  <td className="border px-2 py-1 text-center">
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => handleDelete(detail.id)}
                    >
                      <Trash2 className="h-3 w-3" />
                    </Button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* 모바일/태블릿 카드 뷰 */}
      <div className="lg:hidden space-y-3">
        {bendingDetails.map((detail, detailIndex) => {
          const calculated = detail.input + detail.elongation;
          let sum = 0;
          for (let i = 0; i <= detailIndex; i++) {
            const d = bendingDetails[i];
            sum += d.input + d.elongation;
          }
          
          return (
            <Card key={detail.id} className={`${detail.shaded ? "bg-gray-100" : "bg-white"}`}>
              <CardContent className="p-4 space-y-3">
                {/* 번호 헤더 */}
                <div className="flex items-center justify-between pb-2 border-b">
                  <div className="flex items-center gap-2">
                    <Badge variant="outline" className="bg-blue-50 text-blue-700">
                      #{detail.no}
                    </Badge>
                    <div className="flex items-center gap-2">
                      <Checkbox
                        id={`shaded-${detail.id}`}
                        checked={detail.shaded}
                        onCheckedChange={(checked) => handleFieldChange(detail.id, 'shaded', checked as boolean)}
                      />
                      <Label htmlFor={`shaded-${detail.id}`} className="text-xs text-muted-foreground cursor-pointer">
                        음영
                      </Label>
                    </div>
                  </div>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    onClick={() => handleDelete(detail.id)}
                    className="h-8 w-8 p-0"
                  >
                    <Trash2 className="h-4 w-4 text-red-600" />
                  </Button>
                </div>

                {/* 입력 필드들 */}
                <div className="space-y-3">
                  <div>
                    <Label className="text-xs text-muted-foreground">입력 (mm)</Label>
                    <Input
                      type="number"
                      value={detail.input}
                      onChange={(e) => handleFieldChange(detail.id, 'input', Number(e.target.value))}
                      className="text-center"
                      placeholder="0"
                    />
                  </div>

                  <div>
                    <Label className="text-xs text-muted-foreground">연신율</Label>
                    <Input
                      type="number"
                      value={detail.elongation}
                      onChange={(e) => handleFieldChange(detail.id, 'elongation', Number(e.target.value))}
                      className="text-center"
                      placeholder="-1"
                    />
                  </div>

                  <div>
                    <Label className="text-xs text-muted-foreground">A각 (도)</Label>
                    <Input
                      type="number"
                      value={detail.aAngle || ""}
                      onChange={(e) => handleFieldChange(detail.id, 'aAngle', e.target.value ? Number(e.target.value) : undefined)}
                      placeholder="각도"
                      className="text-center"
                    />
                  </div>
                </div>

                {/* 계산 결과 */}
                <div className="grid grid-cols-2 gap-2 pt-2 border-t">
                  <div className="bg-blue-50 rounded p-2">
                    <div className="text-xs text-muted-foreground mb-1">연신율 계산후</div>
                    <div className="text-center font-medium">{calculated} mm</div>
                  </div>
                  <div className="bg-green-50 rounded p-2">
                    <div className="text-xs text-muted-foreground mb-1">합계</div>
                    <div className="text-center font-medium text-green-700">{sum} mm</div>
                  </div>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>
    </>
  );
}
