import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { 
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Calendar, Clock } from 'lucide-react';

interface WorkingHoursSettingsProps {
  workStartHour: number;
  workEndHour: number;
  workStartDay: number;
  workEndDay: number;
  onWorkStartHourChange: (hour: number) => void;
  onWorkEndHourChange: (hour: number) => void;
  onWorkStartDayChange: (day: number) => void;
  onWorkEndDayChange: (day: number) => void;
}

const DAYS_OF_WEEK = [
  { value: 1, label: 'Monday' },
  { value: 2, label: 'Tuesday' },
  { value: 3, label: 'Wednesday' },
  { value: 4, label: 'Thursday' },
  { value: 5, label: 'Friday' },
  { value: 6, label: 'Saturday' },
  { value: 7, label: 'Sunday' }
];

export function WorkingHoursSettings({
  workStartHour,
  workEndHour,
  workStartDay,
  workEndDay,
  onWorkStartHourChange,
  onWorkEndHourChange,
  onWorkStartDayChange,
  onWorkEndDayChange
}: WorkingHoursSettingsProps) {
  return (
    <Card className="border-0 shadow-sm">
      <CardHeader className="pb-3">
        <div className="flex items-center gap-2">
          <Calendar className="w-5 h-5 text-re-green" />
          <CardTitle className="text-base font-semibold">Working Hours Configuration</CardTitle>
        </div>
        <CardDescription className="text-sm">
          Define your organization's working hours and days for TAT calculations
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="work-start-hour" className="text-sm font-medium">
              Working Day Start Hour
            </Label>
            <Input
              id="work-start-hour"
              type="number"
              min="0"
              max="23"
              value={workStartHour}
              onChange={(e) => onWorkStartHourChange(parseInt(e.target.value) || 9)}
              className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20"
            />
            <p className="text-xs text-muted-foreground flex items-center gap-1">
              <Clock className="w-3 h-3" />
              24-hour format (0-23). Default: 9 AM
            </p>
          </div>

          <div className="space-y-2">
            <Label htmlFor="work-end-hour" className="text-sm font-medium">
              Working Day End Hour
            </Label>
            <Input
              id="work-end-hour"
              type="number"
              min="0"
              max="23"
              value={workEndHour}
              onChange={(e) => onWorkEndHourChange(parseInt(e.target.value) || 18)}
              className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20"
            />
            <p className="text-xs text-muted-foreground flex items-center gap-1">
              <Clock className="w-3 h-3" />
              24-hour format (0-23). Default: 6 PM
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="work-start-day" className="text-sm font-medium">
              Working Week Start Day
            </Label>
            <Select
              value={workStartDay.toString()}
              onValueChange={(value) => onWorkStartDayChange(parseInt(value))}
            >
              <SelectTrigger 
                id="work-start-day"
                className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20"
              >
                <SelectValue placeholder="Select start day" />
              </SelectTrigger>
              <SelectContent>
                {DAYS_OF_WEEK.map((day) => (
                  <SelectItem key={day.value} value={day.value.toString()}>
                    {day.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <p className="text-xs text-muted-foreground">
              Day when the working week starts (1=Monday, 7=Sunday)
            </p>
          </div>

          <div className="space-y-2">
            <Label htmlFor="work-end-day" className="text-sm font-medium">
              Working Week End Day
            </Label>
            <Select
              value={workEndDay.toString()}
              onValueChange={(value) => onWorkEndDayChange(parseInt(value))}
            >
              <SelectTrigger 
                id="work-end-day"
                className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20"
              >
                <SelectValue placeholder="Select end day" />
              </SelectTrigger>
              <SelectContent>
                {DAYS_OF_WEEK.map((day) => (
                  <SelectItem key={day.value} value={day.value.toString()}>
                    {day.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <p className="text-xs text-muted-foreground">
              Day when the working week ends (1=Monday, 7=Sunday)
            </p>
          </div>
        </div>

        <div className="p-4 bg-blue-50 border border-blue-200 rounded-md">
          <p className="text-sm text-blue-900">
            <strong>Current Configuration:</strong> Working hours are from {workStartHour}:00 to {workEndHour}:00, 
            {workStartDay === workEndDay 
              ? ` ${DAYS_OF_WEEK.find(d => d.value === workStartDay)?.label} only`
              : ` ${DAYS_OF_WEEK.find(d => d.value === workStartDay)?.label} to ${DAYS_OF_WEEK.find(d => d.value === workEndDay)?.label}`
            }
          </p>
        </div>
      </CardContent>
    </Card>
  );
}

