import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Plus, Phone, Video, Heart, ShieldAlert, Settings, UserPlus } from "lucide-react";
import { ActionButton, Card, PageTitle, Screen } from "@/components/ui-kit";

export const Route = createFileRoute("/family")({
  head: () => ({
    meta: [{ title: "Family Circle | NeuroSaathi" }],
  }),
  component: FamilyCircle,
});

const familyMembers = [
  {
    id: 1,
    name: "Rahul (Son)",
    role: "Primary Caregiver",
    online: true,
    img: "https://i.pravatar.cc/150?u=rahul",
  },
  {
    id: 2,
    name: "Priya (Daughter)",
    role: "Family Member",
    online: false,
    img: "https://i.pravatar.cc/150?u=priya",
  },
];

function FamilyCircle() {
  return (
    <Screen>
      <PageTitle title="Family Circle" subtitle="Apno se jude rahein, safely aur easily" />

      <div className="mb-6 grid grid-cols-2 gap-3">
        <Card className="flex flex-col items-center justify-center p-4 text-center">
          <div className="mb-2 grid h-12 w-12 place-items-center rounded-full bg-accent/20 text-accent-foreground">
            <Heart className="h-6 w-6" />
          </div>
          <p className="font-display font-semibold">Send a Hug</p>
          <p className="text-xs text-muted-foreground mt-1">Quick check-in</p>
        </Card>
        <Card className="flex flex-col items-center justify-center p-4 text-center">
          <div className="mb-2 grid h-12 w-12 place-items-center rounded-full bg-destructive/10 text-destructive">
            <ShieldAlert className="h-6 w-6" />
          </div>
          <p className="font-display font-semibold">Emergency</p>
          <p className="text-xs text-muted-foreground mt-1">SOS Alert</p>
        </Card>
      </div>

      <div className="mb-4 flex items-center justify-between">
        <h2 className="font-display text-lg font-bold">Your Circle</h2>
        <button className="text-sm font-semibold text-primary">Manage</button>
      </div>

      <div className="space-y-3 mb-6">
        {familyMembers.map((member) => (
          <Card key={member.id} className="flex items-center gap-3 p-3">
            <div className="relative">
              <img
                src={member.img}
                alt={member.name}
                className="h-12 w-12 rounded-full object-cover"
              />
              {member.online && (
                <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-card bg-green-500" />
              )}
            </div>
            <div className="min-w-0 flex-1">
              <p className="truncate font-display font-semibold">{member.name}</p>
              <p className="truncate text-xs text-muted-foreground">{member.role}</p>
            </div>
            <div className="flex gap-2">
              <button className="grid h-10 w-10 place-items-center rounded-full bg-secondary text-secondary-foreground">
                <Phone className="h-5 w-5" />
              </button>
              <button className="grid h-10 w-10 place-items-center rounded-full bg-primary/10 text-primary">
                <Video className="h-5 w-5" />
              </button>
            </div>
          </Card>
        ))}
      </div>

      <ActionButton icon={UserPlus} variant="outline" className="w-full mb-6">
        Invite Family Member
      </ActionButton>

      <div className="rounded-2xl border border-border bg-card p-4">
        <div className="mb-3 flex items-center gap-2">
          <Settings className="h-5 w-5 text-muted-foreground" />
          <h3 className="font-display font-semibold">Privacy & Sharing</h3>
        </div>
        <p className="mb-3 text-sm text-muted-foreground">
          Aap decide karte hain ki kaunsi details family ke saath share karni hain.
        </p>
        <button className="text-sm font-semibold text-primary">Review Permissions</button>
      </div>
    </Screen>
  );
}