'use client';

import { Icons } from '@/components/icons';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';

export interface ProjectPartyEditorCustomer {
  id: string;
  code: string;
  name: string;
}

export interface ProjectPartyEditorRole {
  id: string;
  code: string;
  label: string;
}

export interface ProjectPartyEditorItem {
  key: string;
  customerId: string;
  role: string;
  remark: string;
}

export function createEmptyProjectPartyItem(
  roles: ProjectPartyEditorRole[],
  initial?: Partial<Omit<ProjectPartyEditorItem, 'key'>>
): ProjectPartyEditorItem {
  return {
    key: crypto.randomUUID(),
    customerId: initial?.customerId ?? '',
    role: initial?.role ?? roles[0]?.id ?? '',
    remark: initial?.remark ?? ''
  };
}

export function ProjectPartiesEditor({
  customers,
  roles,
  items,
  onChange
}: {
  customers: ProjectPartyEditorCustomer[];
  roles: ProjectPartyEditorRole[];
  items: ProjectPartyEditorItem[];
  onChange: (items: ProjectPartyEditorItem[]) => void;
}) {
  function updateItem(
    key: string,
    field: keyof Omit<ProjectPartyEditorItem, 'key'>,
    value: string
  ) {
    onChange(
      items.map((item) => (item.key === key ? { ...item, [field]: value } : item))
    );
  }

  function removeItem(key: string) {
    onChange(items.filter((item) => item.key !== key));
  }

  function addItem() {
    onChange([...items, createEmptyProjectPartyItem(roles)]);
  }

  return (
    <div className='space-y-3'>
      <div className='flex items-center justify-between gap-3'>
        <div>
          <div className='text-sm font-medium'>ผู้เกี่ยวข้องในโครงการ</div>
          <p className='text-muted-foreground text-sm'>
            เพิ่มรายชื่อบริษัทที่เกี่ยวข้อง พร้อมบทบาทและหมายเหตุเพิ่มเติม
          </p>
        </div>
        <Button type='button' variant='outline' size='sm' onClick={addItem}>
          <Icons.add className='mr-2 h-4 w-4' /> เพิ่มผู้เกี่ยวข้อง
        </Button>
      </div>

      {!items.length ? (
        <div className='text-muted-foreground rounded-lg border border-dashed p-4 text-sm'>
          ยังไม่มีผู้เกี่ยวข้องในโครงการ โดยลูกค้าผู้รับใบเสนอราคายังคงแยกจากรายการนี้
        </div>
      ) : null}

      <div className='space-y-3'>
        {items.map((item, index) => (
          <div key={item.key} className='rounded-lg border p-4'>
            <div className='mb-3 flex items-center justify-between gap-3'>
              <div className='text-sm font-medium'>ผู้เกี่ยวข้อง {index + 1}</div>
              <Button
                type='button'
                variant='ghost'
                size='sm'
                onClick={() => removeItem(item.key)}
              >
                <Icons.trash className='mr-2 h-4 w-4' /> ลบ
              </Button>
            </div>
            <div className='grid gap-3 md:grid-cols-3'>
              <Select
                value={item.customerId || '__none__'}
                onValueChange={(value) =>
                  updateItem(item.key, 'customerId', value === '__none__' ? '' : value)
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder='ลูกค้า' />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value='__none__'>เลือกลูกค้า</SelectItem>
                  {customers.map((customer) => (
                    <SelectItem key={customer.id} value={customer.id}>
                      {customer.name} ({customer.code})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              <Select value={item.role || '__none__'} onValueChange={(value) => updateItem(item.key, 'role', value === '__none__' ? '' : value)}>
                <SelectTrigger>
                  <SelectValue placeholder='บทบาท' />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value='__none__'>เลือกบทบาท</SelectItem>
                  {roles.map((role) => (
                    <SelectItem key={role.id} value={role.id}>
                      {role.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              <Input
                value={item.remark}
                onChange={(event) => updateItem(item.key, 'remark', event.target.value)}
                placeholder='หมายเหตุ'
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
