import React from 'react';
import {Button} from '@/components/ui/button';
import {Input} from '@/components/ui/input';
import {Card, CardContent, CardHeader} from '@/components/ui/card';
import {Label} from '@/components/ui/label';
import {Trash2} from 'lucide-react';
import MonacoEditor from '@/components/shared/MonacoEditor.jsx';

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from '@/components/ui/table';

const MockRouteResponse = ({
  resp,
  idx,
  onRemoveResponse,
  onAddCondition,
  onRemoveCondition,
  onUpdateConditionField,
  onUpdateResponseField,
  onAddHeader,
  onRemoveHeader,
  onUpdateHeaderField
}) => {
  return (
      <div className="w-full">
        <div className="flex gap-4">
          {/* Left side - Condition card */}
          <div className={`${resp.defaultResponse === 'false' ? 'w-1/2' : 'hidden'}`}>
            <Card className="h-full">
              <CardHeader>
                <div className="flex justify-between items-center">
                  <h3 className="text-lg font-semibold">조건 항목</h3>
                  <Button variant="destructive" onClick={() => onRemoveResponse(idx)}>
                    <Trash2 className="w-4 h-4 mr-1"/>
                    케이스 제거
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <div className="overflow-x-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className="w-[100px]">종류</TableHead>
                        <TableHead>키</TableHead>
                        <TableHead>값</TableHead>
                        <TableHead>
                          <Button
                              variant="secondary"
                              size="sm"
                              onClick={() => onAddCondition(idx)}
                          >
                            추가
                          </Button>
                        </TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {resp.conditions.map((cond, cIndex) => (
                          <TableRow key={cIndex}>
                            <TableCell>
                              <select
                                  className="border p-1 rounded w-full"
                                  value={cond.type}
                                  onChange={(e) =>
                                      onUpdateConditionField(idx, cIndex, 'type', e.target.value)
                                  }
                              >
                                <option value="query">Query</option>
                                <option value="header">Header</option>
                                <option value="body">Body</option>
                              </select>
                            </TableCell>
                            <TableCell>
                              <Input
                                  value={cond.key}
                                  onChange={(e) =>
                                      onUpdateConditionField(idx, cIndex, 'key', e.target.value)
                                  }
                              />
                            </TableCell>
                            <TableCell>
                              <Input
                                  value={cond.value}
                                  onChange={(e) =>
                                      onUpdateConditionField(idx, cIndex, 'value', e.target.value)
                                  }
                              />
                            </TableCell>
                            <TableCell>
                              <Button
                                  variant="destructive"
                                  size="sm"
                                  onClick={() => onRemoveCondition(idx, cIndex)}
                              >
                                제거
                              </Button>
                            </TableCell>
                          </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Right side - Response Content */}
          <div className={`${resp.defaultResponse === 'false' ? 'w-1/2' : 'w-full'}`}>
            <Card className="h-full">
              <CardHeader>
                <h3 className="text-lg font-semibold">응답 내용</h3>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label className="must">Status</Label>
                  <Input
                      type="number"
                      required
                      value={resp.statusCode}
                      onChange={(e) => onUpdateResponseField(idx, 'statusCode', e.target.value)}
                  />
                </div>

                <div>
                  <Label className="must">응답 지연 시간(ms)</Label>
                  <Input
                      type="number"
                      required
                      value={resp.delay}
                      onChange={(e) => onUpdateResponseField(idx, 'delay', e.target.value)}
                  />
                </div>

                <div>
                  <Label className="must">문자 Set</Label>
                  <Input
                      type="text"
                      value={resp.encodingCharset}
                      onChange={(e) =>
                          onUpdateResponseField(idx, 'encodingCharset', e.target.value)
                      }
                  />
                </div>

                <div>
                  <Label>응답 Body</Label>
                  <div className="h-64">
                    <MonacoEditor
                        value={resp.body}
                        language="javascript"
                        onChange={(v) => onUpdateResponseField(idx, 'body', v || '')}
                        height="100%"
                    />
                  </div>
                </div>

                <div>
                  <Label>Headers</Label>
                  <div className="overflow-x-auto mt-2">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead className="w-[150px]">Header 이름</TableHead>
                          <TableHead>값</TableHead>
                          <TableHead>
                            <Button
                                variant="secondary"
                                size="sm"
                                onClick={() => onAddHeader(idx)}
                            >
                              추가
                            </Button>
                          </TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {resp.headers.map((header, hIndex) => (
                            <TableRow key={hIndex}>
                              <TableCell>
                                <Input
                                    value={header.key}
                                    onChange={(e) =>
                                        onUpdateHeaderField(idx, hIndex, 'key', e.target.value)
                                    }
                                />
                              </TableCell>
                              <TableCell>
                                <Input
                                    value={header.value}
                                    onChange={(e) =>
                                        onUpdateHeaderField(idx, hIndex, 'value', e.target.value)
                                    }
                                />
                              </TableCell>
                              <TableCell>
                                <Button
                                    variant="destructive"
                                    size="sm"
                                    onClick={() => onRemoveHeader(idx, hIndex)}
                                >
                                  제거
                                </Button>
                              </TableCell>
                            </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
  );
};

export default MockRouteResponse
