import { useEffect, useState } from 'react';
import { Loader2, Check } from 'lucide-react';
import { Button } from './ui/button';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { useSession } from '../lib/auth-client';
import { validatePhoneOrEmail } from '../lib/validators';

export function ProfileSettings() {
  const { data: session } = useSession();
  const [piFirstName, setPiFirstName] = useState('');
  const [bldgCode, setBldgCode] = useState('');
  const [lab, setLab] = useState('');
  const [contact, setContact] = useState('');
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    fetch('/api/profile', { credentials: 'include' })
      .then(r => (r.ok ? r.json() : null))
      .then(data => {
        if (data) {
          setPiFirstName(data.pi_first_name || '');
          setBldgCode(data.bldg_code || '');
          setLab(data.lab || '');
          setContact(data.contact || '');
        }
      })
      .finally(() => setLoading(false));
  }, []);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError('');
    setSaved(false);

    if (!piFirstName.trim() || !bldgCode.trim() || !lab.trim()) {
      setError('PI first name, building code, and lab are required.');
      return;
    }
    if (contact.trim() && !validatePhoneOrEmail(contact.trim())) {
      setError('Contact must be a valid phone number or email address.');
      return;
    }

    setSaving(true);
    const res = await fetch('/api/profile', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({
        pi_first_name: piFirstName.trim(),
        bldg_code: bldgCode.trim(),
        lab: lab.trim(),
        contact: contact.trim() || undefined,
      }),
    });
    setSaving(false);

    if (res.ok) {
      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } else {
      const data = await res.json().catch(() => ({}));
      setError(data.error || 'Failed to save profile.');
    }
  }

  if (loading) {
    return (
      <div className="flex h-full items-center justify-center">
        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
      </div>
    );
  }

  return (
    <div className="p-8 max-w-2xl mx-auto">
      <div className="mb-6">
        <h1 className="text-2xl font-semibold">Profile settings</h1>
        <p className="text-sm text-muted-foreground mt-1">
          Update your account details and lab defaults.
        </p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Account</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 pb-6">
          <div>
            <Label className="text-xs text-muted-foreground">Name</Label>
            <p className="text-sm">{session?.user.name || '—'}</p>
          </div>
          <div>
            <Label className="text-xs text-muted-foreground">Email</Label>
            <p className="text-sm">{session?.user.email || '—'}</p>
          </div>
        </CardContent>
      </Card>

      <form onSubmit={handleSubmit}>
        <Card className="mt-4">
          <CardHeader>
            <CardTitle className="text-base">Lab defaults</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4 pb-6">
            <div className="space-y-1">
              <Label htmlFor="pi">
                PI first name <span className="text-red-500">*</span>
              </Label>
              <Input
                id="pi"
                value={piFirstName}
                onChange={e => setPiFirstName(e.target.value)}
                required
                placeholder="e.g. Smith"
              />
            </div>
            <div className="space-y-1">
              <Label htmlFor="bldg">
                Building code <span className="text-red-500">*</span>
              </Label>
              <Input
                id="bldg"
                value={bldgCode}
                onChange={e => setBldgCode(e.target.value)}
                required
                placeholder="e.g. EER"
              />
            </div>
            <div className="space-y-1">
              <Label htmlFor="lab">
                Lab <span className="text-red-500">*</span>
              </Label>
              <Input
                id="lab"
                value={lab}
                onChange={e => setLab(e.target.value)}
                required
                placeholder="e.g. 3.822"
              />
            </div>
            <div className="space-y-1">
              <Label htmlFor="contact">
                Contact{' '}
                <span className="text-muted-foreground font-normal">(optional)</span>
              </Label>
              <Input
                id="contact"
                type="text"
                value={contact}
                onChange={e => setContact(e.target.value)}
                placeholder="Phone (e.g. 555-123-4567) or email"
              />
            </div>
            {error && <p className="text-sm text-red-600">{error}</p>}
            {saved && (
              <p className="text-sm text-green-600 flex items-center gap-1">
                <Check className="w-4 h-4" /> Saved
              </p>
            )}
            <div className="pt-1">
              <Button type="submit" disabled={saving}>
                {saving ? 'Saving…' : 'Save changes'}
              </Button>
            </div>
          </CardContent>
        </Card>
      </form>
    </div>
  );
}