'use client';

import { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@/components/ui/select';

interface Student {
  id: number;
  name: string;
  caseNo: string;
  tuitionFee: number;
  commissionType: 'Percent' | 'Fixed';
  commissionValue: number; // either % or fixed amount
}

const studentsData: Student[] = [
  {
    id: 1,
    name: 'John Doe - DH454545 - L45456 - CASE876464',
    caseNo: 'CASE876464',
    tuitionFee: 15000,
    commissionType: 'Percent',
    commissionValue: 10,
  },
  {
    id: 2,
    name: 'Jamie Morgan - DH454545 - L45456 - CASE876464',
    caseNo: 'CASE876464',
    tuitionFee: 15000,
    commissionType: 'Fixed',
    commissionValue: 1500,
  },
];

export default function VisaCaseItems() {
  const [selectedInstance, setSelectedInstance] =
    useState<string>('CASE876464');

  return (
    <div className="p-6 space-y-6">
      {selectedInstance &&
        studentsData.map((student) => {
          const commission =
            student.commissionType === 'Percent'
              ? (student.tuitionFee * student.commissionValue) / 100
              : student.commissionValue;

          return (
            <Card key={student.id} className="shadow-sm">
              <CardHeader className="flex flex-row justify-between items-center">
                <CardTitle className="text-base font-semibold">
                  Sr. {student.id} {student.name}
                </CardTitle>
                <Button variant="outline" size="sm">
                  Commission Info
                </Button>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  {/* Tuition Fees */}
                  <div className="space-y-2">
                    <Label>Tuition Fees*</Label>
                    <Input type="number" value={student.tuitionFee} readOnly />
                  </div>

                  {/* Commission Type */}
                  <div className="space-y-2">
                    <Label>Our Commission Type*</Label>
                    <Select value={student.commissionType}>
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Percent">Percent</SelectItem>
                        <SelectItem value="Fixed">Fixed</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  {/* Commission Percent / Amount */}
                  <div className="space-y-2">
                    <Label>
                      {student.commissionType === 'Percent'
                        ? 'Our Commission Percent*'
                        : 'Our Commission Amount*'}
                    </Label>
                    <Input
                      type="text"
                      value={
                        student.commissionType === 'Percent'
                          ? `${student.commissionValue}%`
                          : `NZD ${student.commissionValue}`
                      }
                      readOnly
                    />
                  </div>

                  {/* Calculated Commission */}
                  <div className="space-y-2">
                    <Label>Our Commission</Label>
                    <Input
                      className="bg-blue-100 font-medium"
                      type="text"
                      value={`NZD ${commission}`}
                      readOnly
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          );
        })}
    </div>
  );
}