"use client";

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { api } from '@/lib/api';
import { QRCodeSVG } from 'qrcode.react';
import { Shield, Search, User, Building2, Calendar, CheckCircle, XCircle } from 'lucide-react';

export default function VerifyPage() {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<any>(null);
  const [error, setError] = useState('');
  const [formData, setFormData] = useState({
    staff_id: '',
    pin: '',
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    setResult(null);

    try {
      const response = await api.post('/verify-staff', formData);
      setResult(response.data.data);
    } catch (error: any) {
      setError(error.response?.data?.message || 'Verification failed');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="container mx-auto px-4 py-16">
      <div className="max-w-2xl mx-auto">
        <div className="text-center mb-8">
          <Shield className="mx-auto h-12 w-12 text-hospital-600 mb-4" />
          <h1 className="text-3xl font-bold mb-2">Staff Verification Portal</h1>
          <p className="text-muted-foreground">
            Verify the authenticity of hospital staff members using their Staff ID and PIN.
          </p>
        </div>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Search className="h-5 w-5" />
              Verify Staff Member
            </CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="staff_id">Staff ID</Label>
                <Input
                  id="staff_id"
                  placeholder="e.g., STF-ABC123"
                  value={formData.staff_id}
                  onChange={(e) => setFormData({ ...formData, staff_id: e.target.value })}
                  required
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="pin">Verification PIN</Label>
                <Input
                  id="pin"
                  type="password"
                  placeholder="6-digit PIN"
                  maxLength={6}
                  value={formData.pin}
                  onChange={(e) => setFormData({ ...formData, pin: e.target.value })}
                  required
                />
              </div>

              <Button type="submit" className="w-full" disabled={loading}>
                {loading ? 'Verifying...' : 'Verify Staff'}
              </Button>
            </form>

            {error && (
              <div className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg flex items-center gap-3">
                <XCircle className="h-5 w-5 text-red-600" />
                <p className="text-red-600">{error}</p>
              </div>
            )}
          </CardContent>
        </Card>

        {result && (
          <Card className="mt-6 border-medical-200">
            <CardContent className="pt-6">
              <div className="flex items-center gap-2 mb-4">
                <CheckCircle className="h-6 w-6 text-medical-500" />
                <h2 className="text-xl font-bold text-medical-700">Verified</h2>
              </div>

              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div className="flex items-center gap-3">
                    <div className="h-16 w-16 rounded-full bg-hospital-100 flex items-center justify-center">
                      <User className="h-8 w-8 text-hospital-600" />
                    </div>
                    <div>
                      <h3 className="font-bold text-lg">{result.full_name}</h3>
                      <Badge className={result.verification_status === 'verified' ? 'bg-medical-100 text-medical-800' : ''}>
                        {result.verification_status}
                      </Badge>
                    </div>
                  </div>

                  <div className="space-y-2 text-sm">
                    <div className="flex items-center gap-2">
                      <Building2 className="h-4 w-4 text-muted-foreground" />
                      <span><strong>Department:</strong> {result.department || 'N/A'}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <User className="h-4 w-4 text-muted-foreground" />
                      <span><strong>Role:</strong> {result.role}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Calendar className="h-4 w-4 text-muted-foreground" />
                      <span><strong>Employment Date:</strong> {result.employment_date}</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Shield className="h-4 w-4 text-muted-foreground" />
                      <span><strong>Status:</strong> {result.status}</span>
                    </div>
                  </div>
                </div>

                <div className="flex flex-col items-center justify-center">
                  <div className="bg-white p-4 rounded-lg shadow-sm">
                    <QRCodeSVG value={result.qr_code_data} size={150} />
                  </div>
                  <p className="text-xs text-muted-foreground mt-2">Digital Verification QR</p>
                </div>
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  );
}